有一棵树,我们只需要其中几个节点可以通过勾选前面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>