zTree树插件使用心得,基于JQuery,集成多扩展,支持多选checkbox,单选radio,拖拽,编辑

由于项目需要丰富的树形态,最近接触了zTree,其具备的详细的API、丰富的扩展,而且使用范例较详细,大大减少了上手难度,十分感谢作者。我主要用其整合java树定义了生成树的标签,包括树形态展示,树形态的多选调用,树形态的单选调用,树编辑(增加子节点、编辑、删除、拖拽移动节点),以下总结一点心得。

  1. 引入JS

     <script type="text/javascript" src="javascripts/jquery.ztree.all-3.5.min.js"></script>
    
  2. 定义节点数据集合

    ztree 提供了原始和简单两种数据定义方式,需要结合setting.data.simpleData 来进行设置

    原始数据型:

     var nodes =[
         {id:"1",name:"北京市",children: [
             {id:"37",name:"东城区",children: [
                 {id:"567",name:"东华门街道"},
                 {id:"568",name:"东四街道"},
                 {id:"569",name:"东直门街道"},
                 {id:"570",name:"交道口街道"}
             ]},
             {id:"38",name:"西城区",children: [
                 {id:"577",name:"什刹海街道"},
                 {id:"578",name:"展览路街道"},
                 {id:"583",name:"金融街街道"}
             ]},
             {id:"39",name:"崇文区"}
         ]},
         {id:"20",name:"上海市"}
     ];
    

    简单数据型:( setting.data.simpleData.rootPId=0 )

     var nodes =[
         {id:"1",pId:"0",name:"北京市"},
         {id:"37",pId:"1",name:"东城区"},
         {id:"567",pId:"37",name:"东华门街道"},
         {id:"568",pId:"37",name:"东四街道"},
         {id:"569",pId:"37",name:"东直门街道"},
         {id:"570",pId:"37",name:"交道口街道"},
         {id:"38",pId:"1",name:"西城区"},
         {id:"577",pId:"38",name:"什刹海街道"},
         {id:"578",pId:"38",name:"展览路街道"},
         {id:"583",pId:"38",name:"金融街街道"},
         {id:"39",pId:"1",name:"崇文区"},
         {id:"20",pId:"0",name:"上海市"}
     ];
    
  3. 按需求配置 setting

     var setting = {
         data : {
             keep : {
                 leaf : false,
                 parent : false
             },
             key : {
                 checked : "checked",
                 children : "children",
                 name : "name",
                 title : ""
                 url : "url"
             },
             simpleData : {
                 enable : false,
                 idKey : "id",
                 pIdKey : "pId",
                 rootPId : null
             }
         },
         check : {
             autoCheckTrigger : false,
             chkboxType : {"Y": "ps", "N": "ps"},
             chkStyle : "checkbox",
             enable : false,
             nocheckInherit : false
             chkDisabledInherit : false
             radioType : "level"
         },
         edit : {
             drag : {
                 autoExpandTrigger : true,
                 isCopy : true,
                 isMove : true,
                 prev : true,
                 next : true,
                 inner : true,
                 borderMax : 10,
                 borderMin : -5,
                 minMoveSize : 5,
                 maxShowNodeNum : 5,
                 autoOpenTime : 500
             },
             editNameSelectAll : false,
             enable : false,
             removeTitle : "remove",
             renameTitle : "rename",
             showRemoveBtn : true,
             showRenameBtn : true
         },
         view : {
             addDiyDom : null,
             addHoverDom : null,
             autoCancelSelected : true,
             dblClickExpand : true,
             expandSpeed : "fast",
             fontCss : {},
             nameIsHTML : false,
             removeHoverDom : null,
             selectedMulti : true,
             showIcon : true,
             showLine : true,
             showTitle : true,
             txtSelectedEnable : false
         },
         callback : {
             beforeAsync : null,
             beforeCheck : null,
             beforeClick : null,
             beforeCollapse : null,
             beforeDblClick : null,
             beforeDrag : null,
             beforeDragOpen : null,
             beforeDrop : null,
             beforeEditName : null,
             beforeExpand : null,
             beforeMouseDown : null,
             beforeMouseUp : null,
             beforeRemove : null,
             beforeRename : null,
             beforeRightClick : null,
             onAsyncError : null,
             onAsyncSuccess : null,
             onCheck : null,
             onClick : null,
             onCollapse : null,
             onDblClick : null,
             onDrag : null,
             onDragMove : null,
             onDrop : null,
             onExpand : null,
             onMouseDown : null,
             onMouseUp : null,
             onNodeCreated : null,
             onRemove : null,
             onRename : null,
             onRightClick : null
         },
         async : {
             autoParam : [],
             contentType : "",
             dataFilter : null,
             dataType : "text",
             enable : false,
             otherParam : [],
             type : "post",
             url : ""
         },
         //treeId : "",
         //treeObj : null
     }
    
  4. 生成树

     $.fn.zTree.init($("#MyTree"), setting, nodes);
    

官方API实在太强大,而且作为重点的 callback 又是相当的复杂,所以这里还是做个传送门算了:
http://www.ztree.me/v3/api.php

zTree 官方网站:http://www.ztree.me/

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏