ztree:數據字典樹，右鍵菜單

字段樹，右鍵菜單-數據字典樹

<link rel="stylesheet" type="text/css" href="<%=base%>/static/plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet" href="<%=base%>/static/ztree/css/zTreeStyle/zTreeStyle.css">
<link rel="stylesheet" href="<%=base%>/static/plugins/contextmenu/jquery.contextMenu.css">

<script type="text/javascript" src="<%=base%>/static/ztree/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="<%=base%>/static/plugins/contextmenu/jquery.contextMenu.js"></script>
<script type="text/javascript" src="<%=base%>/static/plugins/contextmenu/jquery.ui.position.js"></script>

//獲取字典樹
var setting = {
view: {
selectedMulti: false，
addDiyDom: addDiyDom  用於在節點上固定顯示用戶自定義控件
},
data: {
            simpleData: {
           enable: true,
           idKey: "id",
           pIdKey: "parentId",
           rootPId: -1
            }
    },
async: {
type: "get",
            enable: true,
url: web_ctx+"/manage/sys/dict/getTypeWithDataList"
},
callback: {
onAsyncSuccess: expandAll,
/*onRightClick: rightClick,*/
onClick: processNodeData
}
};


/*初始化字典樹*/
$(document).ready(function(){
$.fn.zTree.init($("#dictTree"), setting);
});


/*展開樹*/
function expandAll() {
zTree = $.fn.zTree.getZTreeObj("dictTree");
rMenu = $("#rMenu");
zTree.expandAll(true);

rightClick();
}
function addDiyDom(treeId, treeNode) {
    var dom = $("#" + treeNode.tId + "_a");
    $(dom).addClass(treeNode.nodetype);//根據節點類型添加不同的樣式
}

/*樹單擊事件*/
function processNodeData(event, treeId, treeNode) {
$("#dataTable").clear();
if(!isNull(treeNode.id)&&treeNode.id!=1){
typeid=treeNode.id;
showdata(typeid);//展示此節點的詳細信息
}
}


/*樹節點右鍵事件 在初始化展開樹時調用*/
function rightClick() {
$.contextMenu({
    selector: 'a.level0',
          callback: function(key, options) {
          currNode = zTree.getNodeByTId($(this).attr("id").replace("_a", ""));
          zTree.selectNode(currNode);
           switch(key) {
               case 'addTreeNode': addTreeNode(); break ;
           }
       },
       items: {
        "addTreeNode":{ name: "新增類型", icon: "add" },
       }
   });

$.contextMenu({
    selector: 'a.level1',
          callback: function(key, options) {
        currNode = zTree.getNodeByTId($(this).attr("id").replace("_a", ""));
          zTree.selectNode(currNode);
           switch(key) {
               case 'adddata': adddata(); break ;
               case 'editTreeNode': editTreeNode(); break ;
               case 'delTreeNode': delTreeNode(); break ;
           }
       },
       items: {
        "adddata":{ name: "新增數據", icon: "add" },
        "editTreeNode":{ name: "編輯類型", icon: "edit" },
        "delTreeNode":{ name: "刪除類型", icon: "delete" },
       }
   });
/*if(treeNode.parentId==-1) {
showRMenu("type", event.clientX, event.clientY-50);
} else {
showRMenu("data", event.clientX, event.clientY-50);
}*/

}


/*隱藏右鍵菜單*/
function hideRMenu() {
if (rMenu) rMenu.css({"visibility": "hidden"});
$("body").unbind("mousedown", onBodyMouseDown);
}

function onBodyMouseDown(event) {
if ( !(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0) ) {
rMenu.css({"visibility" : "hidden"});
}
}


/*增加樹節點（新增類型）*/
function addTreeNode() {
hideRMenu();
$("#typeName").text("新增類型");
$("#form1").find("input").val("");
$("#parentId").val(currNode.id);
$("#saveBtn").attr("onclick", "save()");
$("#typeModal").modal("show");

}


/*增加類型數據*/
function adddata() {
hideRMenu();
$("#dataName").text("新增數據");
$("#form2").find("input").val("");
$("#typeid").val(currNode.id);
$("#saveBtn").attr("onclick", "savedata()");
$("#dataModal").modal("show");

}


/*編輯類型*/
function editTreeNode() {
hideRMenu();
$("#typeName").text("編輯類型");
$("#id").val(currNode.id);
$("#name").val(currNode.name);
$("#remark").val(currNode.remark);
$("#saveBtn").attr("onclick", "update()");
$("#typeModal").modal("show");
}


/*刪除類型*/
function delTreeNode() {
hideRMenu();
bootstrapConfirm("提示", "將刪除本類型和類型下所有數據，確定刪除？", 300, function() {
$.ajax({
url: web_ctx+"/manage/sys/dict/delete",
dataType: "json",
data: {"id":currNode.id},
success: function(data) {
if(data.code == 1) {
bootstrapAlert("提示", data.result, 400, function() {
zTree.removeNode(currNode);
datatable.draw();
});
} else {
bootstrapAlert("提示", data.result, 400, null);
}
},
error: function(data) {
bootstrapAlert("提示", "網絡錯誤，請稍後重試！", 400, null);
}
});
}, null);
}