ztree自定义参数_jQueryZtree基本用法

ztree自定义参数_jQueryZtree基本用法

2023年6月22日发(作者:)

ztree⾃定义参数_jQueryZtree基本⽤法1.⾸先在页⾯上有2.定义ztree的配置参数var setting = {//check属性放在data属性之后,复选框不起作⽤check: {enable: true},data: {simpleData: {enable: true},}};3.获得ztree所要绑定的数据,可以使⽤静态数据也可以使⽤ajax获取的数据a)Ztree的数据有两种格式,标准格式如下:标准的 JSON 数据需要嵌套表⽰节点的⽗⼦包含关系例如:var nodes = [{name: "⽗节点1",open:true,children: [{name: "⼦节点1"},{name: "⼦节点2"}]}];b)简单数据格式如下(推荐使⽤):简单模式的 JSON 数据需要使⽤ id/pId表⽰节点的⽗⼦包含关系,如使⽤其他属性设置⽗⼦关联关系请参考内各项说明例如: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⽣成树$.($("#tree"), setting, nodes);第⼀个参数是bj树对象zTreeObj是树的对象,获取到zTreeObj对象后就可以使⽤ztree的N多⽅法来操作树,获取⽅式:var treeObj = $.eeObj("tree"); //参数为树的id具体⽅法都有哪些参见api的zTreeObj部分a)eByParam(key, value, parentNode)根据节点数据的属性搜索,获取条件完全匹配的节点数据 JSON 对象。Key:需要精确匹配的属性名称Value:需要精确匹配的属性值,可以是任何类型,只要保证与 key 指定的属性值保持⼀致即可parentNodeJSON:搜索范围,指定在某个⽗节点下的⼦节点中进⾏搜索,忽略此参数,表⽰在全部节点中搜索返回值JSON匹配精确搜索的节点数据1、如⽆结果,返回 null2、如有多个节点满⾜查询条件,只返回第⼀个匹配到的节点vartreeObj = $.eeObj("tree");var node = eByParam("id", 1, null);b)es()获取zTree的全部节点数据,返回值Array(JSON)vartreeObj = $.eeObj("tree");var nodes = es();c)ectedNodes()获取zTree当前被选中的节点数据集合,返回值Array(JSON)vartreeObj = $.eeObj("tree");var nodes = ectedNodes();d)All(flag) 展开/折叠全部节点flag Boolean true表⽰展开,false表⽰折叠返回值Boolean返回值表⽰最终实际操作情况true 表⽰展开全部节点false 表⽰折叠全部节点null 表⽰不存在任何⽗节点vartreeObj = $.eeObj("tree");All(true);e)Node(treeNode, expandFlag, sonSign, focus, callbackFlag)展开/折叠指定的节点treeNodeJSON:需要展开 / 折叠的节点数据请务必保证此节点数据对象是zTree内部的数据对象expandFlagBooleanexpandFlag = true 表⽰展开节点expandFlag = false 表⽰折叠节点省略此参数,则根据对此节点的展开状态进⾏ toggle 切换sonSignBooleansonSign = true 表⽰全部⼦孙节点进⾏与expandFlag相同的操作sonSign = false 表⽰只影响此节点,对于其⼦孙节点⽆任何影响sonSign = false 且 = expandFlag时,不会触发回调函数,直接返回省略此参数,等同于 falsefocusBooleanfocus = true 表⽰展开 / 折叠操作后,通过设置焦点保证此焦点进⼊可视区域内focus = false 表⽰展开 / 折叠操作后,不设置任何焦点省略此参数,等同于 truecallbackFlagBooleancallbackFlag = true 表⽰执⾏此⽅法时触发beforeExpand / onExpand或beforeCollapse / onCollapse事件回调函数callbackFlag = false 表⽰执⾏此⽅法时不触发事件回调函数省略此参数,等同于 false返回值Boolean返回值表⽰最终实际操作情况true 表⽰展开节点false 表⽰折叠节点null 表⽰不是⽗节点vartreeObj = $.eeObj("tree");var nodes = ectedNodes();if (>0) {Node(nodes[0], true, true, true);}de树节点对象每⼀个treeNode对象都有N多属性和⽅法,具体参见api的treeNode部分常⽤⽰例:a)nt判断节点是否是⽗节点b)节点名称c)en获取节点的⼦节点数据集合d)entNode获取⽗节点e)获取节点的层级,根节点的level为0f)⽣成的树的节点的html id,区别于主键idg)TId获取的⽗节点的tIdh)绑定到树上的其他字段可以通过treeNode对象直接获取,如:

发布者:admin,转转请注明出处:http://www.yc00.com/news/1687381864a5847.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信