304 lines
11 KiB
JavaScript
304 lines
11 KiB
JavaScript
|
//默认信息
|
|||
|
|
var defvalue = {
|
|||
|
|
//根节点id
|
|||
|
|
rootid: function () {
|
|||
|
|
var def = 103;
|
|||
|
|
var root = $().getPara("id");
|
|||
|
|
root = isNaN(root) ? -1 : Number(root);
|
|||
|
|
root = parseInt(root) <= 0 ? def : parseInt(root);
|
|||
|
|
return root;
|
|||
|
|
},
|
|||
|
|
//菜单类型,func为功能菜单,sys为系统菜单
|
|||
|
|
type: "sys",
|
|||
|
|
//图标默认位置
|
|||
|
|
ico: { x: 90, y: 101 }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//分类的根节点
|
|||
|
|
var rootid = defvalue.rootid();
|
|||
|
|
//
|
|||
|
|
$(function () {
|
|||
|
|
setTimeout("initloyout()", 100);
|
|||
|
|
setEditPanel("root");
|
|||
|
|
icoEvent();
|
|||
|
|
$().SoapAjax("ManageMenu", "Order", { result: "", rootid: rootid, type: defvalue.type }, funcc, loading, unloading);
|
|||
|
|
});
|
|||
|
|
//页面初始化布局
|
|||
|
|
function initloyout() {
|
|||
|
|
$("input[type='text']").addClass("TextBox");
|
|||
|
|
//左侧菜单树区域 //右侧编辑区域
|
|||
|
|
var h = document.documentElement.clientHeight - 20;
|
|||
|
|
$("#MenuTreePanel").height(h - 120);
|
|||
|
|
$("#Panel").height(h - 153);
|
|||
|
|
//右侧编辑区事件
|
|||
|
|
$("#EditPanelTitle div").click(function () {
|
|||
|
|
var type = $(this).attr("type");
|
|||
|
|
setEditPanel(type);
|
|||
|
|
});
|
|||
|
|
//保存按钮
|
|||
|
|
$("input[name$='btnEnter']").click(function () {
|
|||
|
|
if (!Verify.IsPass($("form:visible"))) {
|
|||
|
|
return false;
|
|||
|
|
};
|
|||
|
|
update.submit(); //提交编辑数据
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
//图示事件
|
|||
|
|
function icoEvent() {
|
|||
|
|
$(".ico").click(function () {
|
|||
|
|
var panel = $("#icoPanel");
|
|||
|
|
var off = $(this).offset();
|
|||
|
|
panel.css({ left: off.left - panel.width() / 2, top: off.top + $(this).height() });
|
|||
|
|
panel.show();
|
|||
|
|
panel.mousemove(function (elem, e) {
|
|||
|
|
var ico = $(".ico:visible");
|
|||
|
|
var xy = $().Mouse(e);
|
|||
|
|
var off = $("#icoPanel").offset();
|
|||
|
|
var x = xy.x - off.left - 8;
|
|||
|
|
var y = xy.y - off.top - 9;
|
|||
|
|
ico.attr("left", x).attr("top", y);
|
|||
|
|
ico.css("background-position", (-x + "px ") + (-y + "px"));
|
|||
|
|
});
|
|||
|
|
panel.click(function () {
|
|||
|
|
$(this).unbind("click");
|
|||
|
|
$(this).unbind("mousemove");
|
|||
|
|
$(this).hide();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
//数据载入完成后的事件
|
|||
|
|
//data:完整数据源，webservice输出
|
|||
|
|
function funcc(data, msg) {
|
|||
|
|
if (msg != null) update.alert(msg);
|
|||
|
|
//重建菜单
|
|||
|
|
window.treeDataSource = data;
|
|||
|
|
var tree = new Tree("#MenuTreePanel");
|
|||
|
|
Tree.RootClick = editroot;
|
|||
|
|
Tree.NodeClick = editNode;
|
|||
|
|
//
|
|||
|
|
Tree.RootId = rootid;
|
|||
|
|
Tree.onChangeOrder = changeOrder;
|
|||
|
|
Tree.onDelNode = delNode;
|
|||
|
|
//生成菜单
|
|||
|
|
tree.BuildMenu(data);
|
|||
|
|
//$("#MenuTreePanel").html(rootHtml);
|
|||
|
|
editroot();
|
|||
|
|
}
|
|||
|
|
//编辑根节点
|
|||
|
|
function editroot() {
|
|||
|
|
var root = $("#RootEditPanel");
|
|||
|
|
var edit = $("#EditPanel");
|
|||
|
|
setEditPanel("edit");
|
|||
|
|
root.show();
|
|||
|
|
edit.hide();
|
|||
|
|
$.get("/manage/soap/ManageMenu.asmx/ManageMenuJson", { id: rootid }, function (data) {
|
|||
|
|
var node = eval("(" + unescape($(data).text()) + ")");
|
|||
|
|
update.setCtl($("#RootEditPanel"), node);
|
|||
|
|
update.setCtl($("#patdata"), node); //在新增界面的上级
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
//进入编辑子节点
|
|||
|
|
function editNode(node) {
|
|||
|
|
var root = $("#RootEditPanel");
|
|||
|
|
var edit = $("#EditPanel");
|
|||
|
|
setEditPanel("edit");
|
|||
|
|
root.hide();
|
|||
|
|
edit.show();
|
|||
|
|
var data = window.treeDataSource;
|
|||
|
|
var panel = $("#MenuEditPanel");
|
|||
|
|
var id = node.attr("nodeId");
|
|||
|
|
//获取单个信息
|
|||
|
|
$.get("/manage/soap/ManageMenu.asmx/ManageMenuJson", { id: id }, function (data) {
|
|||
|
|
var node = eval("(" + unescape($(data).text()) + ")");
|
|||
|
|
update.setCtl($("#EditPanel"), node); //填充数据
|
|||
|
|
update.setCtl($("#patdata"), node); //在新增界面的上级
|
|||
|
|
//菜单项的“移动到”
|
|||
|
|
panel.find("select[name$='moveto']").attr("value", rootid);
|
|||
|
|
panel.find("select[name$='copyto']").attr("value", rootid);
|
|||
|
|
//当前节点父节点信息
|
|||
|
|
$.get("/manage/soap/ManageMenu.asmx/ManageMenuJson", { id: node.MM_PatId }, function (data) {
|
|||
|
|
var node = eval("(" + unescape($(data).text()) + ")");
|
|||
|
|
var panel = $("#EditPanel");
|
|||
|
|
panel.find("#editNodeParent").text(node.MM_Name);
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
//开始载入时的预载
|
|||
|
|
function loading() {
|
|||
|
|
$("#loadingBar").show();
|
|||
|
|
var mask = $("#screenMask");
|
|||
|
|
if (mask.size() > 0) mask.remove();
|
|||
|
|
$("body").append("<div id=\"screenMask\"/>");
|
|||
|
|
mask = $("#screenMask");
|
|||
|
|
var h = document.documentElement.clientHeight;
|
|||
|
|
mask.css({
|
|||
|
|
"width": "100%", "height": h - 30, "top": 30, "left": 5, "display": "block",
|
|||
|
|
"background-color": "#ffffff", "position": "absolute", "z-index": "50000",
|
|||
|
|
"filter": "Alpha(Opacity=60)", "-moz-opacity": 0.6, "opacity": 0.6
|
|||
|
|
}).fadeIn("slow");
|
|||
|
|
}
|
|||
|
|
//载入完成后，清除预载效果
|
|||
|
|
function unloading() {
|
|||
|
|
$("#screenMask").remove();
|
|||
|
|
$("#loadingBar").hide();
|
|||
|
|
}
|
|||
|
|
//控制编辑面板的事件
|
|||
|
|
//pevent:"edit"为编辑节点，"add"为新增
|
|||
|
|
function setEditPanel(pevent) {
|
|||
|
|
//编辑区面板
|
|||
|
|
var panel = $("#MenuEditPanel #Panel");
|
|||
|
|
panel.children().hide();
|
|||
|
|
var edit = $("#RootEditPanel").parent();
|
|||
|
|
var add = $("#AddPanel");
|
|||
|
|
$("#EditPanelTitle").children().removeClass("click");
|
|||
|
|
switch (pevent) {
|
|||
|
|
case "edit":
|
|||
|
|
add.hide();
|
|||
|
|
edit.show();
|
|||
|
|
$("#EditPanelTitle div[type='edit']").addClass("click");
|
|||
|
|
break;
|
|||
|
|
case "add":
|
|||
|
|
edit.hide();
|
|||
|
|
add.show();
|
|||
|
|
$("#EditPanelTitle div[type='add']").addClass("click");
|
|||
|
|
var ico = $(".ico:visible");
|
|||
|
|
ico.attr("left", defvalue.ico.x).attr("top", defvalue.ico.y);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//获取填写的数据
|
|||
|
|
var update = {
|
|||
|
|
//根节点
|
|||
|
|
rootxml: function () {
|
|||
|
|
var panel = $("#RootEditPanel");
|
|||
|
|
var tmp = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>";
|
|||
|
|
tmp += "<node type=\"root\" id=\"" + rootid + "\" rootid=\"" + rootid + "\">";
|
|||
|
|
tmp += update.getCtl(panel);
|
|||
|
|
tmp += "</node>";
|
|||
|
|
return tmp;
|
|||
|
|
},
|
|||
|
|
//修改子节点
|
|||
|
|
nodexml: function () {
|
|||
|
|
var panel = $("#EditPanel");
|
|||
|
|
var tmp = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>";
|
|||
|
|
tmp += "<node type=\"edit\" id=\"" + panel.find("span[name='id']").text() + "\" rootid=\"" + rootid + "\">";
|
|||
|
|
tmp += update.getCtl(panel);
|
|||
|
|
tmp += "</node>";
|
|||
|
|
return tmp;
|
|||
|
|
},
|
|||
|
|
//添加子菜点
|
|||
|
|
addxml: function () {
|
|||
|
|
var panel = $("#AddPanel");
|
|||
|
|
//结果
|
|||
|
|
var tmp = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>";
|
|||
|
|
tmp += "<node type=\"add\" id=\"-1\" rootid=\"" + rootid + "\">";
|
|||
|
|
tmp += "<patid>" + panel.find("span[name='id']").text() + "</patid>";
|
|||
|
|
tmp += update.getCtl(panel);
|
|||
|
|
tmp += "</node>";
|
|||
|
|
return tmp;
|
|||
|
|
},
|
|||
|
|
//获取控件值
|
|||
|
|
getCtl: function (panel) {
|
|||
|
|
var ctls = panel.find("*[name]:visible");
|
|||
|
|
var str = "<{0}>{1}</{0}>";
|
|||
|
|
var tmp = "<func>" + defvalue.type + "</func>";
|
|||
|
|
ctls.each(function () {
|
|||
|
|
var element = $(this).get(0).tagName.toLowerCase(); //控件html标签名
|
|||
|
|
//var tm= $(this).attr("name");
|
|||
|
|
//console.log("标签名称："+element+ " 标签内容：" +$(this).html())
|
|||
|
|
//console.log("name:"+tm+" 是否为空："+(tm==null));
|
|||
|
|
var name = $.trim($(this).attr("name") != null ? $(this).attr("name").toLowerCase() : ""); //控件名称
|
|||
|
|
if (element == "input") {
|
|||
|
|
var type = $(this).attr("type").toLowerCase(); //控件类型
|
|||
|
|
if (type == "text") tmp += str.format(name, encodeURIComponent($.trim($(this).val())));
|
|||
|
|
if (type == "checkbox") tmp += str.format(name, $(this).attr('checked'));
|
|||
|
|
}
|
|||
|
|
if (element == "span") {
|
|||
|
|
var read = $(this).attr("read");
|
|||
|
|
if (read == "no") return true;
|
|||
|
|
if (name != "") tmp += str.format(name, $(this).text());
|
|||
|
|
}
|
|||
|
|
if (element == "select") {
|
|||
|
|
tmp += str.format(name, panel.find("select[name=" + name + "] option:selected").val());
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//类型
|
|||
|
|
var type = panel.find("input[name=type][type=radio]:checked").val();
|
|||
|
|
tmp += str.format("type", type);
|
|||
|
|
tmp += "<icox>" + panel.find(".ico:visible").attr("left") + "</icox>";
|
|||
|
|
tmp += "<icoy>" + panel.find(".ico:visible").attr("top") + "</icoy>";
|
|||
|
|
return tmp;
|
|||
|
|
},
|
|||
|
|
//填充控件值
|
|||
|
|
setCtl: function (panel, node) {
|
|||
|
|
var ctls = panel.find("*[type!=submit][type!=button][name]");
|
|||
|
|
ctls.each(function () {
|
|||
|
|
var element = $(this).get(0).tagName.toLowerCase(); //控件html标签名
|
|||
|
|
var name = $.trim($(this).attr("name").toLowerCase()); //控件名称
|
|||
|
|
for (var n in node) {
|
|||
|
|
var attr = n.substring(n.lastIndexOf("_") + 1).toLowerCase();
|
|||
|
|
if (element == "input") {
|
|||
|
|
var type = $(this).attr("type").toLowerCase(); //控件类型
|
|||
|
|
if (attr == name && type == "text") $(this).val(node[n]);
|
|||
|
|
if (attr == name && type == "checkbox") $(this).attr('checked', node[n]);
|
|||
|
|
}
|
|||
|
|
if (element == "span" && attr == name) $(this).text(node[n]);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//节点类别
|
|||
|
|
panel.find("input[name='type']").each(function () {
|
|||
|
|
var v = $(this).val();
|
|||
|
|
$(this).removeAttr("checked");
|
|||
|
|
if (v == node.MM_Type) $(this).prop("checked", "checked");
|
|||
|
|
});
|
|||
|
|
//图标
|
|||
|
|
if (node.MM_IcoX <= 0) {
|
|||
|
|
node.MM_IcoX = defvalue.ico.x;
|
|||
|
|
node.MM_IcoY = defvalue.ico.y;
|
|||
|
|
}
|
|||
|
|
var ico = $(".ico:visible");
|
|||
|
|
ico.attr("left", node.MM_IcoX).attr("top", node.MM_IcoY);
|
|||
|
|
ico.css("background-position", (-node.MM_IcoX + "px ") + (-node.MM_IcoY + "px"));
|
|||
|
|
},
|
|||
|
|
//提交事件
|
|||
|
|
submit: function () {
|
|||
|
|
var xml = "";
|
|||
|
|
if ($("#RootEditPanel").is(":visible")) xml = update.rootxml(); //修改根节点
|
|||
|
|
if ($("#EditPanel").is(":visible")) xml = update.nodexml(); //修改子节点
|
|||
|
|
if ($("#AddPanel").is(":visible")) xml = update.addxml(); //新增子节点
|
|||
|
|
if (xml == "") return;
|
|||
|
|
$().SoapAjax("ManageMenu", "Update", { result: xml, pid: Tree.RootId, type: defvalue.type }, function (data) {
|
|||
|
|
funcc(data, "完成修改操作！");
|
|||
|
|
}, loading, unloading);
|
|||
|
|
},
|
|||
|
|
//提示信息
|
|||
|
|
alert: function (msg) {
|
|||
|
|
var alert = $("#alert");
|
|||
|
|
alert.html(msg).css("font-size", "60px").fadeIn(300, function () {
|
|||
|
|
$(this).animate({ "font-size": "14px" }, 1000, function () {
|
|||
|
|
$(this).fadeOut(1000);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//更改顺序
|
|||
|
|
function changeOrder(res) {
|
|||
|
|
$().SoapAjax("ManageMenu", "Order", { result: res, rootid: Tree.RootId, type: defvalue.type }, function (data) {
|
|||
|
|
funcc(data, "完成菜单排序更改！");
|
|||
|
|
}, loading, unloading);
|
|||
|
|
}
|
|||
|
|
//删除节点
|
|||
|
|
function delNode(res) {
|
|||
|
|
var div = $("#NodeDragDiv");
|
|||
|
|
if (div.length < 1) return;
|
|||
|
|
var name = div.text();
|
|||
|
|
var msg = "您是否确定要删除当前菜单项：" + name + " ？\n注：\n1、当前菜单项的所有下属菜单，也会同时删除\;\n2、删除后无法恢复。";
|
|||
|
|
if (!confirm(msg)) return;
|
|||
|
|
$().SoapAjax("ManageMenu", "Del", { result: res, pid: Tree.RootId, type: defvalue.type }, function (data) {
|
|||
|
|
funcc(data, "完成删除操作！");
|
|||
|
|
}, loading, unloading);
|
|||
|
|
}
|