有一棵树，我们只需要其中几个节点可以通过勾选前面checkbox来对其进行操作，且这个操作需要动态执行。应该如何实现呢？
==========》
面对这样一个需求，如果我们使用的是zTree树控件，那么将会变得非常地简单。
面对这样一个需求，如果我们使用的是zTree树控件，那么将会变得非常地简单。
1、引入ztree树相关的js文件
1.<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
2.<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
3.<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
4.<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
5.<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
注意excheck.js文件是一定要引入的，要不然会导致节点前的checkbox无法显示和操作。
2、默认设置每一个节点的nocheck属性值为true
nocheck表示无checkbox选择框，属性值设置为true，表示不会显示节点前面的checkbox选择框。所以需要我们在提供节点数据给zTree树控件之前设置好每一个节点的nocheck值为true，示例数据形如：
01.//ztree用于初始化的静态数据
02.var zNodes
= [
03.{
id: 1, pId: 0, name: "随意勾选
1",
nocheck: true },
04.{
id: 11, pId: 1, name: "随意勾选
1-1",
nocheck: true },
05.{
id: 111, pId: 11, name: "无
checkbox 1-1-1",
nocheck: true },
06.{
id: 112, pId: 11, name: "随意勾选
1-1-2",
nocheck: true },
07.{
id: 12, pId: 1, name: "无
checkbox 1-2",
nocheck: true },
08.{
id: 2, pId: 0, name: "随意勾选
2",
nocheck: true },
09.];
3、动态设置节点前显示checkbox
想要让某个节点显示checkbox选择框，就必须要更新其nocheck属性值为false即可。核心方法如下所示：
01.//过滤节点的机制
直接return node表示不做任何过滤
02.function filter(node)
{
03.return node;
04.}
05.
06.///动态设置zTree的所有节点有checkbox
07.function DynamicUpdateNodeCheck()
{
08.var zTree
= $.fn.zTree.getZTreeObj("treeDemo");
09.//根据过滤机制获得zTree的所有节点
10.var nodes
= zTree.getNodesByFilter(filter);
11.//遍历每一个节点然后动态更新nocheck属性值
12.for (var i
= 0; i < nodes.length; i++) {
13.var node
= nodes[i];
14.node.nocheck
= false; //表示显示checkbox
15.zTree.updateNode(node);
16.}
17.}
完整示例代码如下所示：
<!DOCTYPE html>
<html>
<head>
<title>ZTREE DEMO - 默认zTree几点无checkbox动态设置节点checkbox出现</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript">
<!--
var setting = {
check: {
enable: true,
nocheckInherit: false
},
data: {
simpleData: {
enable: true
}
}
};
//ztree用于初始化的静态数据
var zNodes = [
{ id: 1, pId: 0, name: "随意勾选 1", nocheck: true },
{ id: 11, pId: 1, name: "随意勾选 1-1", nocheck: true },
{ id: 111, pId: 11, name: "无 checkbox 1-1-1", nocheck: true },
{ id: 112, pId: 11, name: "随意勾选 1-1-2", nocheck: true },
{ id: 12, pId: 1, name: "无 checkbox 1-2", nocheck: true },
{ id: 2, pId: 0, name: "随意勾选 2", nocheck: true },
];
//过滤节点的机制 直接return node表示不做任何过滤
function filter(node) {
return node;
}
///动态设置zTree的所有节点有checkbox
function DynamicUpdateNodeCheck() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//根据过滤机制获得zTree的所有节点
var nodes = zTree.getNodesByFilter(filter);
//遍历每一个节点然后动态更新nocheck属性值
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
node.nocheck = false; //表示显示checkbox
zTree.updateNode(node);
}
}
///页面加载后初始化zTree数据且默认展开所有节点
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo"), setting, zNodes).expandAll(true);
});
//-->
</script>
</head>
<body>
<h1>
Checkbox nocheck 演示</h1>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree">
</ul>
</div>
<div class="right">
<p>
默认情况下设置任何节点无checkbox选择框，需要配置每一个节点的nocheck属性为true即可。</p>
<p>
zTree加载完成后通过updateNode(node)方法动态更新节点的nocheck属性为false，则节点将会显示checkbox。</p>
<h3>
STEP DAY</h3>
<div>
<input type="button" value="动态设置节点有checkbox" onclick="DynamicUpdateNodeCheck()" />
</div>
</div>
</div>
</body>
</html>