jquery.ztree增加checkbox選項（可選以及不可選）
阿新 • • 發佈：2019-02-06
有一棵樹，我們只需要其中幾個節點可以通過勾選前面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>