Ztree使用方法VIP专享VIP免费

Ztree使用方法1.首先在页面上有

标签

2.定义ztree的配置参数varsetting={view:{selectedMulti:false},data:{key:{title:"valuesName",name:"valuesName"},simpleData:{enable:true,idKey:"dataValues",pIdKey:"parentId"}},check:{enable:false},callback:{onClick:onClick}};以上是常用配置,具体参见ztreeapi的setting部分3.获得ztree所要绑定的数据,可以使固定数据也可以使ajax获取的数据a)Ztree的数据有两种格式,标准格式如下:o标准的JSON数据需要嵌套表示节点的父子包含关系例如：varnodes=[{name:"父节点1",open:true,children:[{name:"子节点1"},{name:"子节点2"}]}];b)简单数据格式如下(推荐使用):o简单模式的JSON数据需要使用id/pId表示节点的父子包含关系，如使用其他属性设置父子关联关系请参考setting.data.simple内各项说明例如：varnodes=[{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则为标准数据格式.varsetting={data:{simpleData:{enable:true}}};4.初始化ztree生成树$.fn.zTree.init($("#tree"),setting,nodes);第一个参数是

id选择的jquery对象,第二个参数是配置的setting,第三个参数是获取到的数据.例子:HTML中

Js中varsetting={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));}5.zTreeObj树对象zTreeObj是树的对象,获取到zTreeObj对象后就可以使用ztree的N多方法来操作树,获取方式:vartreeObj=$.fn.zTree.getZTreeObj("tree");//参数为树的id具体方法都有哪些参见api的zTreeObj部分常用方法介绍:a)zTreeObj.getNodeByParam(key,value,parentNode)根据节点数据的属性搜索，获取条件完全匹配的节点数据JSON对象KeyString需要精确匹配的属性名称Value?需要精确匹配的属性值，可以是任何类型，只要保证与key指定的属性值保持一致即可parentNodeJSON搜索范围，指定在某个父节点下的子节点中进行搜索忽略此参数，表示在全部节点中搜索返回值JSON匹配精确搜索的节点数据1、如无结果，返回null2、如有多个节点满足查询条件，只返回第一个匹配到的节点vartreeObj=$.fn.zTree.getZTreeObj("tree");varnode=treeObj.getNodeByParam("id",1,null);b)zTreeObj.getNodes()获取zTree的全部节点数据返回值Array(JSON)vartreeObj=$.fn.zTree.getZTreeObj("tree");varnodes=treeObj.getNodes();c)zTreeObj.getSelectedNodes()获取zTree当前被选中的节点数据集合返回值Array(JSON)vartreeObj=$.fn.zTree.getZTreeObj("tree");varnodes=treeObj.getSelectedNodes();d)zTreeObj.expandAll(flag)展开/折叠全部节点flagBooleantrue表示展开,false表示折叠返回值Boolean返回值表示最终实际操作情况true表示展开全部节点false表示折叠全部节点null表示不存在任何父节点vartreeObj=$.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表示只影响...