一，扩展要求

真的是没有对比就没有伤害。如果只是单纯的按照ztree的api去异步加载树结构，那么就会使左图那个样子。

特点：1，所有的节点前面均会有radio(因为设置的是radio:"all"属性)。

2，只有在点击节点前面的“加减号”才可以展开或者是收起子节点。

于是问题出现了。1，我们想要在点击节点的时候，而不是一定要去点击“加减号”的时候子节点展开或者收起。

2，我们想要在特点的节点前面加上特定的选框，而不是在所有节点前面都加。

二，解决方案

1，点击节点也可以展开或者收起子节点。

var setting = {
async:{
autoParam:["parentId"],
enable:true,
type:"post",
url:getUrl,
dataFilter:filter,
},
check : {
chkStyle: "radio",
enable: false,
chkboxType : { "Y" : "s", "N" : "ps" },
radioType : "level"
},
view: {
dblClickExpand: false,
addDiyDom:addDiyDom
},
data : {
key : {
name : "unitName"
},
simpleData : {
enable : true,
idKey : "id",
pIdKey : "parentId",
rootPId : 0
}
},
callback : {
beforeAsync : ztreeBeforeAsync,
onAsyncSuccess : ztreeOnAsyncSuccess,
onClick:ztreeOnAsyncSuccess
}
};

只需要添加一个点击事件的回调函数就好了，且就调用onAsyncSuccess 参数所设置的方法就好了。只不过有些需要注意的地方。

1，添加点击事件加载之后，ztreeOnAsyncSuccess这个方法会被调用两次，一次是点击事件调用，还有一次应该就是ztree框架封装好的异步加载调用。所以在方法中需要限制一下，如果是框架封装好的调用，他的效果是如果发现已经有子节点了，则不会重复加载，但是onclick事件也在调用，就需要我们注意了，如果每次都直接是取子节点然后加载，那么每次点击，每次加载，就会有一堆重复的子节点被加载上来。所以需要在方法中限定，如果发现有子节点了，则展开就好，没有的话，再去后台取数据。还有就是如果发现子节点是展开的，那么就收起，如果不是，则展开。保证一次点击展开子节点，再次点击收起子节点。

2，在特点的节点前面加上特点的选框。那么在setting中radioType设置成“all”或者“level”已经作用不大了。关键的设置是 view中的addDiyDom:addDiyDom设置

这个设置就是让你对特定的节点做出特殊的处理。

主要注意的是，如果你的选框是后加上的，那么你对节点的事件也需要重新绑定，重新按照需求写。否则也只是空加了一个选框而已。

前台小白默默的把我的代码贴上来吧。

<pre name="code" class="javascript">function addDiyDom(treeId, treeNode){// 只在社区节点前面添加radio选框var unitCode = treeNode.unitCode;if(unitCode.length != 12){return ;}var aObj = $("#" + treeNode.tId + "_a");var editStr = "<input type='radio' name = 'unitName' class='input-radio' id='radio_" +treeNode.id+"_"+treeNode.pId+"'></input>";aObj.before(editStr);var btn = $("#radio_"+treeNode.id+"_"+treeNode.pId);if (btn) {btn.bind("click", function() {nodeCheck(treeNode,btn);});}};
function nodeCheck(treeNode,btn){if(btn.attr("checked"){// TODO:}else{// TODO:}
}

ZTree学习(三)，ztree树扩展相关推荐

6.easyui+ztree案例：zTree树
做的就是西部区域面板中的树形导航图. Easyui中也有树,但是这个树不够强大. zTree性能非常好,功能强大. 介绍: l 什么是zTree呢? zTree是一个依靠jQuery实现的多功能&q ...
ztree 自定义参数_zTree树插件使用方法及自定义控件实践_蓝戒的博客
zTree简介: zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 实践版本:zTree-verso ...
zTree 优秀的jquery树插件
zTree 优秀的jquery树插件,文档详细,渲染快使用方法: 1.引用zTree的js和css文件 <link href="~/Content/zTree_v3/css/zTre ...
layui ztree 实现下拉树
完整代码下载 JS 代码 //id div 的id,isMultiple 是否多选,chkboxType 多选框类型{"Y": "ps", "N&qu ...
zTree开发下拉树
最近,因为工作需要一个树形下拉框的组件,经过查资料一般有两种的实现方法.其一,就是使用zTree实现:其二,就是使用easyUI实现.因为公司的前端不是使用easyUI设计的,故这里我选择了zTree ...
linux uart寄存器代替 printk,Linux驱动学习之设备树（设备树下的LED驱动实验），...
Linux驱动学习之设备树(设备树下的LED驱动实验), 概念 Linux内核从3.x开始引入设备树的概念,用于实现驱动代码与设备信息相分离.相当于从驱动代码分离出来的配置文件,比如串口的波特率通过设 ...
机器学习（三）树模型
机器学习(一)LR 机器学习(二)SVM 机器学习(三)树模型机器学习(四)聚类机器学习(三)树模型目录二.树模型 1.ID3 2.C4.5 3.CART树 (1)算法步骤 (2)举例 (3) ...
实至名归！ACM宣布深度学习三巨头共同获得图灵奖
昨日晚间,ACM(国际计算机学会)宣布,有"深度学习三巨头"之称的Yoshua Bengio.Yann LeCun.Geoffrey Hinton共同获得了2018年的图灵奖,这是 ...
es6学习笔记-字符串的扩展_v1.0_byKL
es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...

ZTree学习(三)，ztree树扩展

一，扩展要求

二，解决方案

ZTree学习(三)，ztree树扩展相关推荐

最新文章

热门文章