jquery zTree的基本用法

Posted 2020-10-15 业务高于技术

①在页面引用zTree的js和css：

<link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css">   
<script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script> 

②代码基本实现

//======html
<div>
  <ul id="treeContainer" class="ztree"></ul>
</div>

//================js脚本
var zNodes = [];
$(function(){
   loadTree();     //初始化树
   getTreeData();  //后台加载数据
});
function loadTree(){
    $.fn.zTree.init($.(‘#treeContainer‘),{
        data:{
            simpleData:{
                enable:true
            }
        },
        view:{
            nameIsHTML:true,
            showLine:true,
            dblClick:false
        },
        callback:{
            onClick : nodeEvents   //点击节点执行的方法
        }
    },zNodes);
}
function getTreeData(){
     $.ajax({
          type:"post",
          url:"",
          async:true,
          data:{},
          dataType:"TEXT",
          success:function(data)
          {
              var arr = data.split(‘\1‘);
            zNodes.push({
                id:arr[0],  //本身id
                pId:arr[1], //父级id
                name:‘‘,    //显示的名称
                data:‘‘,   //这个data是传到下面nodeEvent()里面的
                open:true   //默认节点打开
            });
          }
          
      });
}

function nodeEvents(e,treeId,treeNode){
    var data = treeNode.data;
    
    var zTree = $.fn.zTree.getZTreeObj(‘treeContainer‘);
    zTree.expandNode(treeNode,true);
}

3.setting 配置详解

  1     一. zTree的 setting 配置详解  
  2       
  3     var setting = {  
  4      treeId : "",//zTree 的唯一标识，初始化后，等于 用户定义的 zTree 容器的 id 属性值。  
  5     //请勿进行初始化 或 修改，属于内部参数。   
  6      treeObj : null,//zTree 容器的 jQuery 对象，主要功能：便于操作。  
  7     //请勿进行初始化 或 修改，属于内部参数。  
  8       
  9       
 10      async : {// 是否异步加载 相当于ajax  
 11     autoParam : [], //可以设置提交时的参数名称，例如 server 只接受 zId : ["id=zId"] ; 默认值空  
 12     contentType : "application...",  
 13     dataFilter : null,  
 14     dataType : "text",  
 15     enable : false,//设置 zTree 是否开启异步加载模式  
 16     //默认值：false  
 17     otherParam : [],//其他参数 ;直接用 JSON 格式制作键值对，例如：{ key1:value1, key2:value2 }  
 18     type : "post",  //请求方式  
 19     url : "" //路径  
 20      },  
 21      callback : {//返回函数; 根据需求选择合适的监听事件  //以下事件默认权威null 事件例子参见第83行  
 22     beforeAsync : null,//异步加载之前的事件回调函数，zTree 根据返回值确定是否允许进行异步加载  
 23       
 24     beforeCheck : null,//勾选 或 取消勾选 之前的事件回调函数，并且根据返回值确定是否允许 勾选 或 取消勾选  
 25       
 26     beforeClick : null,//单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作  
 27       
 28     beforeCollapse : null,//父节点折叠之前的事件回调函数，并且根据返回值确定是否允许折叠操作  
 29       
 30     beforeDblClick : null,// zTree 上鼠标双击之前的事件回调函数，并且根据返回值确定触发 onDblClick 事件回调函数  
 31       
 32     beforeDrag : null,//节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作  
 33       
 34     beforeDragOpen : null,//拖拽节点移动到折叠状态的父节点后，即将自动展开该父节点之前的事件回调函数，并且根据返回值确定是否允许自动展开操作  
 35       
 36     beforeDrop : null,//节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作  
 37       
 38     beforeEditName : null,//节点编辑按钮的 click 事件，并且根据返回值确定是否允许进入名称编辑状态  
 39       
 40     beforeExpand : null,//父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作  
 41       
 42     beforeMouseDown : null,// zTree 上鼠标按键按下之前的事件回调函数，并且根据返回值确定触发 onMouseDown 事件回调函数  
 43       
 44     beforeMouseUp : null,//zTree 上鼠标按键松开之前的事件回调函数，并且根据返回值确定触发 onMouseUp 事件回调函数  
 45       
 46     beforeRemove : null,//节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作  
 47       
 48     beforeRename : null,//节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作  
 49       
 50     beforeRightClick : null,// zTree 上鼠标右键点击之前的事件回调函数，并且根据返回值确定触发 onRightClick 事件回调函数  
 51       
 52     onAsyncError : null,//异步加载出现异常错误的事件回调函数  
 53       
 54     onAsyncSuccess : null,//异步加载正常结束的事件回调函数  
 55       
 56     onCheck : null,// checkbox / radio 被勾选 或 取消勾选的事件回调函数  
 57       
 58     onClick : null,//节点被点击的事件回调函数  
 59       
 60     onCollapse : null,//节点被折叠的事件回调函数  
 61       
 62     onDblClick : null,// zTree 上鼠标双击之后的事件回调函数  
 63       
 64     onDrag : null,//节点被拖拽的事件回调函数  
 65       
 66     onDragMove : null,//节点被拖拽过程中移动的事件回调函数  
 67       
 68     onDrop : null,//节点拖拽操作结束的事件回调函数  
 69       
 70     onExpand : null,//节点被展开的事件回调函数  
 71       
 72     onMouseDown : null,// zTree 上鼠标按键按下后的事件回调函数  
 73       
 74     onMouseUp : null,// zTree 上鼠标按键松开后的事件回调函数  
 75       
 76     onNodeCreated : null,//节点生成 DOM 后的事件回调函数  
 77       
 78     onRemove : null,//删除节点之后的事件回调函数。  
 79       
 80     onRename : null,//节点编辑名称结束之后的事件回调函数。  
 81       
 82     onRightClick : null// zTree 上鼠标右键点击之后的事件回调函数  
 83      },  
 84         例. 节点勾选或取消事件   
 85     function zTreeOnCheck(event, treeId, treeNode) {  
 86     alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);  
 87     };  
 88     var setting = {  
 89     callback: {  
 90     onCheck: zTreeOnCheck  
 91     }  
 92     };  
 93         Function 参数说明  
 94     参数数据类型说明  
 95     eventjs event 对象标准的 js event 对象  
 96     treeId String对应 zTree 的 treeId，便于用户操控  
 97     treeNode JSON被勾选 或 取消勾选的节点 JSON 数据对象  
 98       
 99       
100     setting参数配置讲解继续...  
101      check : {//设置zTree是否可以被勾选,及勾选的参数配置  
102     autoCheckTrigger : false,//设置自动关联勾选时是否触发 beforeCheck / onCheck 事件回调函数。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]  
103       
104       
105     chkboxType : {"Y": "ps", "N": "ps"},//勾选 checkbox 对于父子节点的关联关系。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]  
106       
107       
108     chkStyle : "checkbox",//勾选框类型(checkbox 或 radio）[setting.check.enable = true 时生效]  
109       
110       
111     enable : false,//设置 zTree 的节点上是否显示 checkbox / radio  
112     //默认值: false  
113       
114       
115     nocheckInherit : false//当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true 。[setting.check.enable = true 时生效]  
116       
117       
118     chkDisabledInherit : false//当父节点设置 chkDisabled = true 时，设置子节点是否自动继承 chkDisabled = true 。[setting.check.enable = true 时生效]  
119       
120       
121     radioType : "level"//radio 的分组范围。[setting.check.enable = true 且 setting.check.chkStyle = "radio" 时生效]  
122      },  
123      data : {//非常重要  
124     keep : { //子节点和父节点属性设置 默认值都为false  
125       leaf : false,//zTree 的节点叶子节点属性锁，是否始终保持 isParent = false  
126       
127       
128       parent : false//zTree 的节点父节点属性锁，是否始终保持 isParent = true  
129     },  
130     key : { //节点数据  
131       checked : "checked",//zTree 节点数据中保存 check 状态的属性名称。  
132       
133       
134       children : "children",//zTree 节点数据中保存子节点数据的属性名称。  
135       
136       
137       name : "name",//zTree 节点数据保存节点名称的属性名称。  
138       
139       
140       title : "" //zTree 节点数据保存节点提示信息的属性名称。[setting.view.showTitle = true 时生效]  
141       
142       
143       url : "url" //设置 zTree 显示节点时，将 treeNode 的 xUrl 属性当做节点链接的目标 URL  
144     },  
145     simpleData : {  
146       enable : false,//确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)  
147       
148       
149       idKey : "id",//节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]  
150       
151       
152       pIdKey : "pId",//节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]  
153       
154       
155       rootPId : null//用于修正根节点父节点数据，即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效]  
156     }  
157      },  
158      edit : {//可以编辑节点 : 增 删 改  
159     drag : {  
160     autoExpandTrigger : true,//拖拽时父节点自动展开是否触发 onExpand 事件回调函数。[setting.edit.enable = true 时生效]  
161       
162       
163     isCopy : true,//拖拽时, 设置是否允许复制节点。[setting.edit.enable = true 时生效]  
164       
165       
166     isMove : true,//拖拽时, 设置是否允许移动节点。[setting.edit.enable = true 时生效]  
167       
168       
169     prev : true, //拖拽到目标节点时，设置是否允许移动到目标节点前面的操作。[setting.edit.enable = true 时生效]  
170       
171       
172     next : true, //拖拽到目标节点时，设置是否允许移动到目标节点后面的操作。[setting.edit.enable = true 时生效]  
173       
174       
175     inner : true, //拖拽到目标节点时，设置是否允许成为目标节点的子节点。[setting.edit.enable = true 时生效]  
176       
177       
178     borderMax : 10,//拖拽节点成为根节点时的 Tree 内边界范围 (单位：px)。[setting.edit.enable = true 时生效]  
179       
180       
181     borderMin : -5,//拖拽节点成为根节点时的 Tree 外边界范围 (单位：px)。[setting.edit.enable = true 时生效]  
182       
183       
184     minMoveSize : 5,//判定是否拖拽操作的最小位移值 (单位：px)。[setting.edit.enable = true 时生效]  
185       
186       
187     maxShowNodeNum : 5,//拖拽多个兄弟节点时，浮动图层中显示的最大节点数。 多余的节点用...代替。[setting.edit.enable = true 时生效]  
188       
189       
190     autoOpenTime : 500//拖拽时父节点自动展开的延时间隔。 (单位：ms)[setting.edit.enable = true 时生效]  
191       
192     },  
193     editNameSelectAll : false,  
194     enable : false,//设置 zTree 是否处于编辑状态,true / false 分别表示 可以 / 不可以 编辑  
195       
196     removeTitle : "remove",//删除按钮的 Title 辅助信息。[setting.edit.enable = true & setting.edit.showRemoveBtn = true 时生效]  
197       
198     renameTitle : "rename",//编辑名称按钮的 Title 辅助信息。[setting.edit.enable = true & setting.edit.showRenameBtn = true 时生效]  
199       
200     showRemoveBtn : true,//设置是否显示删除按钮。[setting.edit.enable = true 时生效]  
201       
202     showRenameBtn : true//设置是否显示编辑名称按钮。[setting.edit.enable = true 时生效]  
203       
204     },  
205      view : {  
206     addDiyDom : null,//用于在节点上固定显示用户自定义控件  
207       
208     addHoverDom : null,//用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮  
209       
210     autoCancelSelected : true,//点击节点时，按下 Ctrl 或 Cmd 键是否允许取消选择操作。  
211       
212     dblClickExpand : true,//双击节点时，是否自动展开父节点的标识  
213       
214     expandSpeed : "fast",//zTree 节点展开、折叠时的动画速度，设置方法同 JQuery 动画效果中 speed 参数。  
215       
216     fontCss : {}, //个性化文字样式，只针对 zTree 在节点上显示的<A>对象。  
217       
218     nameIsHTML : false,//设置 name 属性是否支持 HTML 脚本  
219       
220     removeHoverDom : null,//用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮  
221       
222     selectedMulti : true,//设置是否允许同时选中多个节点。  
223       
224     showIcon : true,//设置 zTree 是否显示节点的图标。  
225       
226     showLine : true,//设置 zTree 是否显示节点之间的连线。  
227       
228     showTitle : true,//设置 zTree 是否显示节点的 title 提示信息(即节点 DOM 的 title 属性)。  
229       
230     txtSelectedEnable : false//设置 zTree 是否允许可以选择 zTree DOM 内的文本。  
231      }  
232     }