ztree的使用

ztree的功能很强大，可以将复杂的树状结构数据以树形结构展示出来，而不需要在后端将其数据进行树状结构的封装，只需传入三个必要的参数，分别是：id,pid,name。下面是具体的ztree的使用实例在使用之前需要导入ztree的js文件jquery.ztree.all-3.5.js

• ztree的初始化

 var setting = {
            view: {
                    addHoverDom: addHoverDom,
                    removeHoverDom: removeHoverDom,
                    selectedMulti: false
                },
            edit: {
                 enable: true,
                 editNameSelectAll: true,
                 showRemoveBtn: true,
                 showRenameBtn: true
                },

            callback: {
                 beforeDrag: beforeDrag,
                 beforeEditName: beforeEditName,
                 onRename: onRename,
                 beforeRemove: beforeRemove,
                 beforeRename: beforeRename,
                 onRemove: onRemove,
                 onDblClick:onDblClick

            },
            async : {  
                 enable : true, 
                 url : '<%=request.getContextPath()%>/tree/queryAllTree', 
                 // Ajax 获取数据的 URL 地址  
                 autoParam : "id=treeId","cndescription","pid" ] 

             }, 

             data:{ // 必须使用data  
                 key:{
                    name:"cnDescription"
                 },

                simpleData : {  
                    enable : true,  
                     idKey : "treeId", // id编号命名   
                    pIdKey : "pid", // 父id编号命名    
                     rootPId : 0 

                 }  
             }

     };

---

• ztree的初始化

     $(document).ready(function(){
        var treeObj = $.fn.zTree.init($("#ztree"), setting);
    })

---

• html中ztree的定义

    <ul id="ztree" class="ztree"></ul>

具体的使用请点击ztree在中文ApI,上面讲解的很详细。