详解js树形控件(2)

需要注意的是,zTree的事件回调部分,基本上每一个事件都对应一个beforeXXX事件,比如onClick事件对应有一个beforeOnClick事件,主要用于控制相关事件是否允许执行,如果before事件返回false,则取消执行对应相关事件。

1.2 zTree的数据格式

zTree的每一个节点都是一个treeNode对象,treeNode对象经常用到的属性和方法如下:

treeNode: { name, //节点显示的文本 checked, //节点是否勾选,ztree配置启用复选框时有效 open, //节点是否展开 icon, //节点的图标 iconOpen, //节点展开式的图标 iconClose, //节点折叠时的图标 id, //节点的标识属性,对应的是启用简单数据格式时idKey对应的属性名,并不一定是id,如果setting中定义的idKey:"zId",那么此处就是zId pId, //节点parentId属性,命名规则同id children, //得到该节点所有孩子节点,直接下级,若要得到所有下属层级节点,需要自己写递归得到 isParent, //判断该节点是否是父节点,一般应用中通常需要判断只有叶子节点才能进行相关操作,或者删除时判断下面是有子节点时经常用到。 getPath() //得到该节点的路径,即所有父节点,包括自己,此方法返回的是一个数组,通常用于创建类似面包屑导航的东西A-->B-->C }

zTree的数据源一般有标准数据格式、简单数据格式两种,标准数据格式通过指定节点的chidren属性构建层级关系,而简单数据格式根据根据id,pid属性构建层级关系,我们在应用开发中使用关系型数据库,一般采用的都是简单数据格式。

标准数据格式

var nodes = [ {name: "父节点1", children: [ {name: "子节点1"}, {name: "子节点2"} ]} ];

简单数据格式

var nodes = [ {id:1, pId:0, name: "父节点1"}, {id:11, pId:1, name: "子节点1"}, {id:12, pId:1, name: "子节点2"} ];

注意zTree的默认配置是不启用简单数据格式,使用简单数据格式一定要在setting中进行简单数据格式的相关配置。

1.3 zTree的常用方法

zTree的主要操作方法介绍如下

获取zTree对象

var treeObj = $.fn.zTree.getZTreeObj("tree");

增加节点

addNodes(parentNode,index,newNodes,isSlient)

parentNode:指定的父节点,如果增加根节点,请设置 parentNode 为 null 即可

index:新节点插入的位置(从 0 开始),index = -1 时,插入到最后,此参数可忽略

newNodes:需要增加的节点数据 JSON 对象集合,数据只需要满足 zTree 的节点数据必需的属性即可

isSilent:true 时,添加节点后不展开父节点,其他值或缺省状态都自动展开

勾选或取消勾选全部节点

checkAllNodes(checked);

checked参数为true时全部勾选,为false时全部取消勾选。

勾选或取消勾选单个节点

checkNode(node, checked, checkedTypeFlag,callbackFlag);

node:要进行操作的节点

checked:为true勾选,为false取消勾选

checkeTypeFlag:为true表示对当前结点的子节点及父节点进行勾选状态的联动,为false不联动

callbackFlag:为true时表示执行beforeOnCheck和onCheck事件的回调函数,为false不执行

编辑节点

edit(node);  使节点处于编辑状态,必须引用jquery.ztree.exedit 扩展。

展开或折叠全部节点

expandAll(expand);

expand为true是展开所有节点,为false是折叠所有节点。

根据节点属性查找结点

getNodesByParam(key,value, parentNode);

key:属性名

value:属性值

parentNode:是否在指定节点下查找,为null表示整个树查找。

获取被勾选或未被勾选的节点集合

getCheckedNodes(checked);

checked为true表示获取所有被勾选的节点集合,为false表示所有未被勾选的节点集合

获取输入框勾选状态被改变的节点集合

getChangeCheckedNodes()

2 zTree的常用操作

2.0 ajax请求数据并创建zTree 

$(function () { var setting = { //此处根据自己需要进行配置 view: { selectedMulti: false }, data: { simpleData: { enable: true } }, callback: { onClick: onDesignTreeClick, onRightClick: OnRightClick, beforeRename: beforeRename, onCheck:onCheck } }; $.ajax({ type: "Get", url: "/Design/GetDesignTreeData", //ajax请求地址 success: function (data) { $.fn.zTree.init($("#treeZo"), setting, data); //加载数据 }, }); });

后台代码如下,可以根据需要返回你想要的任何数据,绑定到zTree上,然后通过treeNode.属性名取到对应的值,实现一些界面逻辑操作。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwjjjd.html