ztree的使用

来源:互联网 发布:js 弧线 编辑:程序博客网 时间:2024/05/18 01:38

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,上面讲解的很详细。

2 0