Ztree使用方法.docx

Ztree使用方法1. 首先在页面上有标签2. 定义ztree的配置参数var setting = view : selectedMulti : false,data : key : title : valuesName,name : valuesName,simpleData : enable : true,idKey : dataValues,pIdKey : parentId,check : enable : false,callback : onClick : onClick;以上是常用配置,具体参见ztree api 的setting部分3. 获得ztree所要绑定的数据,可以使固定数据也可以使ajax获取的数据a) Ztree的数据有两种格式,标准格式如下:o 标准的 JSON 数据需要嵌套表示节点的父子包含关系例如：var nodes = name: 父节点1,open:true, children: name: 子节点1,name: 子节点2;b) 简单数据格式如下(推荐使用):o 简单模式的 JSON 数据需要使用 id / pId 表示节点的父子包含关系，如使用其他属性设置父子关联关系请参考 setting.data.simple 内各项说明例如：var nodes = id:1, pId:0, name: 父节点1,id:11, pId:1, name: 子节点1,id:12, pId:1, name: 子节点2;简单数据的id,pId,name,title都可以在setting的data中进行配置,指定相应的字段在setting的data中配置simpleData为enable:true即表示使用简单数据格式,不配置或配置为false则为标准数据格式.var setting = data: simpleData: enable: true;4. 初始化ztree生成树$.fn.zTree.init($(#tree), setting, nodes);第一个参数是id选择的jquery对象,第二个参数是配置的setting,第三个参数是获取到的数据.例子:HTML中Js中var setting = view : selectedMulti : false,data : key : title : valuesName,name : valuesName,simpleData : enable : true,idKey : dataValues,pIdKey : parentId,check : enable : false,callback : onClick : onClick;function onClick(event, treeId, treeNode, clickFlag) alert(treeId: + treeId + name: + treeNode.name + level:+ treeNode.level + tid: + treeNode.tId + parentTId:+ treeNode.parentTId + children: + treeNode.children);$(function() $.fn.zTree.init($(#tree), setting, $.parseJSON(tdata);5. zTreeObj树对象zTreeObj是树的对象,获取到zTreeObj对象后就可以使用ztree的N多方法来操作树,获取方式:var treeObj = $.fn.zTree.getZTreeObj(tree); /参数为树的id具体方法都有哪些参见api的zTreeObj部分常用方法介绍:a) zTreeObj.getNodeByParam (key, value, parentNode)根据节点数据的属性搜索，获取条件完全匹配的节点数据 JSON 对象Key String需要精确匹配的属性名称Value ?需要精确匹配的属性值，可以是任何类型，只要保证与 key 指定的属性值保持一致即可parentNode JSON搜索范围，指定在某个父节点下的子节点中进行搜索忽略此参数，表示在全部节点中搜索返回值JSON匹配精确搜索的节点数据1、如无结果，返回 null2、如有多个节点满足查询条件，只返回第一个匹配到的节点var treeObj = $.fn.zTree.getZTreeObj(tree);var node = treeObj.getNodeByParam(id, 1, null);b) zTreeObj.getNodes()获取 zTree 的全部节点数据返回值Array(JSON)var treeObj = $.fn.zTree.getZTreeObj(tree);var nodes = treeObj.getNodes();c) zTreeObj.getSelectedNodes()获取 zTree 当前被选中的节点数据集合返回值Array(JSON)var treeObj = $.fn.zTree.getZTreeObj(tree);var nodes = treeObj.getSelectedNodes();d) zTreeObj.expandAll(flag) 展开 / 折叠 全部节点flag Boolean true表示展开,false表示折叠返回值Boolean返回值表示最终实际操作情况true 表示 展开 全部节点false 表示 折叠 全部节点null 表示 不存在任何父节点var treeObj = $.fn.zTree.getZTreeObj(tree);treeObj.expandAll(true);e) zTreeObj.expandNode(treeNode, expandFlag, sonSign, focus, callbackFlag) 展开 / 折叠 指定的节点treeNodeJSON需要 展开 / 折叠 的节点数据请务必保证此节点数据对象 是 zTree 内部的数据对象expandFlagBooleanexpandFlag = true 表示 展开 节点expandFlag = false 表示 折叠 节点省略此参数，则根据对此节点的展开状态进行 toggle 切换sonSignBooleansonSign = true 表示 全部子孙节点 进行与 expandFlag 相同的操作sonSign = false 表示 只影响此节点，对于其 子孙节点无任何影响sonSign = false 且 treeNode.open = expandFlag 时，不会触发回调函数，直接返回省略此参数，等同于 falsefocusBooleanfocus = true 表示 展开 / 折叠 操作后，通过设置焦点保证此焦点进入可视区域内focus = false 表示 展开 / 折叠 操作后，不设置任何焦点省略此参数，等同于 truecallbackFlagBooleancallbackFlag = true 表示执行此方法时触发 beforeExpand / onExpand 或 beforeCollapse / onCollapse 事件回调函数callbackFlag = false 表示执行此方法时不触发事件回调函数省略此参数，等同于 false返回值Boolean返回值表示最终实际操作情况true 表示 展开 节点false 表示 折叠 节点null 表示 不是父节点var treeObj = $.fn.zTree.getZTreeObj(tree);var nodes = treeObj.getSelectedNodes();if (nodes.length0) treeObj.expandNode(nodes0, true, true, true);6. treeNode 树节点对象每一个treeNode对象都有N多属性和方法,具体参见api 的treeNode部分常用示例:a) treeNode.isParent 判断节点是否是父节点b) treeNode.name 节点名称c) treeNode.children获取节点的子节点数据集合d) treeNode.getParentNode获取父节点e) treeNode.level 获取节点的层级,根节点的level为0f) treeNode.tId生成的树的节点的html id,区别于主键idg) treeNode.parentTId获取的父节点的tIdh) 绑定到树上的其他字段可以通过treeNode对象直接获取,如:treeNode.phone