第四章 Ztree使用方法.docxVIP

Ztree使用方法首先在页面上有ul/标签ulid=treeclass=ztree/ul定义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}};以上是常用配置,具体参见ztreeapi的setting部分获得ztree所要绑定的数据,可以使固定数据也可以使ajax获取的数据Ztree的数据有两种格式,标准格式如下:标准的 JSON 数据需要嵌套表示节点的父子包含关系例如：var nodes = [{name: 父节点1,open:true, children: [{name: 子节点1},{name: 子节点2}]}];简单数据格式如下(推荐使用):简单模式的 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}}};初始化ztree生成树$.fn.zTree.init($(#tree), setting, nodes);第一个参数是ul/id选择的jquery对象,第二个参数是配置的setting,第三个参数是获取到的数据.例子:HTML中ulid=treeclass=ztree/ulJs中var setting = {view : {selectedMulti :false},data : {key : {title :valuesName,name :valuesName},simpleData : {enable :true,idKey :dataValues,pIdKey :parentId}},check : {enable :false},callback : {onClick :onClick}};functiononClick(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));}zTreeObj树对象zTreeObj是树的对象,获取到zTreeObj对象后就可以使用ztree的N多方法来操作树,获取方式:vartreeObj = $.fn.zTree.getZTreeObj(tree); //参数为树的id具体方法都有哪些参见api的zTreeObj部分常用方法介绍:zTreeObj.getNodeByParam(key, value, parentNode)根据节点数据的属性搜索，获取条件完全匹配的节点数据 JSON 对象KeyString需要精确匹配的属性名称Value?需要精确匹配的属性值，可以是任何类型，只要保证与 key 指定的属性值保持一致即可parentNodeJSON搜索范围，指定在某个父节点下的子节点中进行搜索忽略此参数，表示在全部节点中搜索返回值JSON匹配精确搜索的节点数据1、如无结果，返回 null2、如有多个节点满足查询条件，只返回第一个匹配到的节点vartreeObj = $.fn.zTree.getZTreeObj(tree);var node = treeObj.getNodeByParam(id, 1, null);zTreeObj.getNodes()获取z