关于zTree树插件的使用总结

关于zTree树插件的一些使用总结

参考链接：http://www.treejs.cn/v3/api.php

//html
<form class="form-horizontal">
    <div id="tree" class="ztree"></div>
</form>
//js引用 基本使用引用core.js 和 excheck.js即可，如要编辑或其它功能请加上exedit.js
<script src="resources/libs/zTree/js/jquery.ztree.core.js"></script>
<script src="resources/libs/zTree/js/jquery.ztree.excheck.js"></script>
<script src="resources/libs/zTree/js/jquery.ztree.exedit.js"></script>

1、菜单树渲染、编辑、删除

// 菜单数据
var data =  [ {"id": "p1","parent": null,"name": "网办业务"}, {"id": "p1-1","parent": "p1","name": "待办业务"}{"id": "p2","parent": null,"name": "系统管理"
	}, {"id": "p2-1","parent": "p2","name": "用户管理"}, {"id": "p2-2","parent": "p2","name": "角色管理"} ]
//方法
function zTreeInit ( zNode){
	var setting = {
	            view: {
	                dblClickExpand: false,
	                showLine: true,
	                selectedMulti: false,
	            },
	            data: {
	                simpleData: {
	                    enable: true,
	                    idKey: "id",
	                    pIdKey: "parent",
	                    rootPId: ""
	                }
	            },
	            edit: {
	                enable: true, //启用编辑功能必须设置 enable 参数
	                showRemoveBtn: true, //是否展示删除按钮
	                removeTitle: "删除菜单", 
	                showRenameBtn: false, //编辑按钮
	                // renameTitle: "编辑节点名称"
	            },
	            callback: {
	                onClick: zTreeOnClick, //菜单点击事件，通常通过此事件去获取该菜单的详情
	                beforeRemove: zTreeBeforeRemove, //删除之前事件
	                // onRemove: zTreeOnRemove
	            }
	        };
	        $.fn.zTree.init($("#tree"), setting, zNodes);
	        var treeObj = $.fn.zTree.getZTreeObj("tree");
	        treeObj.expandAll(true); //展开全部菜单
};
zTreeInit(data);
// 删除之前事件
function zTreeBeforeRemove(treeId, treeNode) {
    $.confirm("确定删除此菜单？",function(){
        zTreeOnRemove(treeId, treeNode)
    });
    return false;  //****一定要 return false
};
//删除
function zTreeOnRemove(treeId, treeNode) {
	//调删除接口即可
};
function zTreeOnClick(event, treeId, treeNode) {
	// 菜单点击事件
	//调接口获取该菜单的详细数据
}

2、默认选中已存在数据、自定义添加DOM、勾选checkbox时父子节点的关联关系、根节点不能选中

//节点数据
var nodeData=[
    {"id": "d1","parent": null,"name": "部门1","value": "d1","selected": false,"sort": 1,"canSelect": 0},
    {"id": "d1-1","parent": "d1","name": "子部门1-1","value": "d1-1","selected": false,"sort": 1,"canSelect": 0},
    {"id": "d2","parent": null,"name": "部门2","value": "d2","selected": false,"sort": 1,"canSelect": 0},
    {"id": "d2-1","parent": "d2","name": "子部门2-1","value": "d2-1","selected": false,"sort": 1,"canSelect": 0},
    {"id": "d2-2","parent": "d2","name": "子部门2-2","value": "d2-2","selected": false,"sort": 1,"canSelect": 0},
    {"id": "d2-3","parent": "d2","name": "子部门2-3","value": "d2-3","selected": false,"sort": 1,"canSelect": 0}
];
//用户数据(用户已经选择的数据)
var userData = [{"id": "d1-1","parent": "d1","name": "子部门1-1","value": "d1-1","selected": false,"sort": 1,"canSelect": 0},]
// 数据处理
function zTreeData(nodeData,userData) {
    var zNodes2 = [];
    for (var i = 0; i < nodeData.length; i++) {
        var node = {};
        node.id = nodeData[i].id;
        node.pId = nodeData[i].parent;
        node.name = nodeData[i].name;
        node.choseType = type;
        for (var y = 0, len2 = userData.length; y < len2; y++) {
            if (nodeData[i].id == userData[y].id) {
                node.open = true;    //**已存在数据默认展开
                 node.checked = true; //**已存在数据展开后默认选中状态
            }
        };
        zNodes2.push(node);
    };
    zTreeInit(zNodes2, 1);
};
zTreeData(nodeData,userData);
//zTree初始化注册
function zTreeInit(zNodes, type){
	var setting = {
        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false,
            addDiyDom: addDiyDom  //***添加自定义DOM
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: { "Y": "", "N": "" }  //**勾选checkbox时父子节点的关联关系,此为操作互不影响;
        },
        callback: {}       
    };
    $.fn.zTree.init($("#tree"), setting, zNodes);
    //**设置根节点不能选中
    if (type == '1') {
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        treeObj.expandAll(true);
        var nodes = treeObj.transformToArray(treeObj.getNodes());
        for (var i = 0, l = nodes.length; i < l; i++) {
            if (nodes[i].isParent) {
                treeObj.setChkDisabled(nodes[i], true);
            }
        };
    };
}；
// *** 添加自定义DOM (这里给每个节点添加个设置默认部门按钮)
 function addDiyDom(treeId, treeNode) {
     if (treeNode.choseType == 'department') {
         var aObj = $("#" + treeNode.tId + "_a");
         if ($("#diyBtn_" + treeNode.id).length > 0) return;
         var editStr = "<label class='tick-label' οnfοcus='this.blur();'><input type='radio' name='default-department' id='diyBtn_" + treeNode.id + "'  />默认</label>";
         aObj.append(editStr);
         var btn = $("#diyBtn_" + treeNode.id);
         //按钮绑定事件
         if (btn) btn.bind("click", function() {
             var treeObj = $.fn.zTree.getZTreeObj("tree");
             //业务逻辑
             /*userMes.defaultDepartment = {
                 id: treeNode.id,
                 name: treeNode.name
             };*/
         });
     } else {
         return
     };
 };

3、自定义图标、删除(或编辑)等按钮按需显示

//节点数据
var nodeData=[
    {"id": "d1","parent": null,"name": "部门1","value": "d1","selected": false,"sort": 1,"canSelect": 0},
    {"id": "d1-1","parent": "d1","name": "子部门1-1","value": "d1-1","selected": false,"sort": 1,"canSelect": 0},
    {"id": "d2","parent": null,"name": "部门2","value": "d2","selected": false,"sort": 1,"canSelect": 0},
    {"id": "d2-1","parent": "d2","name": "子部门2-1","value": "d2-1","selected": false,"sort": 1,"canSelect": 0},
    {"id": "d2-2","parent": "d2","name": "子部门2-2","value": "d2-2","selected": false,"sort": 1,"canSelect": 0},
    {"id": "d2-3","parent": "d2","name": "子部门2-3","value": "d2-3","selected": false,"sort": 1,"canSelect": 0}
];
function zTreeData(nodeData) {
    var zNodes2 = [];
    for (var i = 0; i < nodeData.length; i++) {
        var node = {};
        node.id = nodeData[i].id;
        node.pId = nodeData[i].parent;
        node.name = nodeData[i].name;
        node.canSelect = nodeData[i].canSelect;
        if (nodeData[i].canSelect == 1) {
            node.iconSkin = 'diy_button'     //***自定义icon的类名
        } else {
            node.iconSkin = 'diy_page'
        }
        zNodes2.push(node);
    };
    zTreeInit(zNodes2, type);
};
zTreeData(nodeData);
//ztree初始化及注册
function zTreeInit(nodeData){
	var setting = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false,
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                }
            },
            edit: {
                enable: true,
                showRemoveBtn: setRemoveBtn,
                removeTitle: "删除按钮",
                showRenameBtn: false,
            },
            callback: {
                onClick: zTreeOnClick,
                beforeRemove: zTreeBeforeRemove,
                // onRemove: zTreeOnRemove
            }
        };
        $.fn.zTree.init($("#tree"), setting, zNodes);
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        treeObj.expandAll(true); //展开全部
};
//删除按钮按需显示，canSelect:0 不能选中（菜单），1 能选中(按钮)
function setRemoveBtn(treeId, treeNode) {
    if (treeNode.canSelect == 0)
        return false;
    else
        return true;
};