轉(https://www.augsky.com/992.html)
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5CNykzM5MDMzkTMtcjN2ETMxETNxEjM3AzNxAjMtYzNxIzMy8CX3AzNxAjMvwlN3EjMzIzLcd2bsJ2Lc12bj5ycn9Gbi52YuUTMwIzcldWYtl2Lc9CX6MHc0RHaiojIsJye.png)
選中父節點時,父節點下所有子節點也都全部選中
1,HTML代碼
1 <h2>TreeView Checkable</h2>
2 <div id="treeview-checkable"></div>
2,Json資料
1 function getTvStateData() {
2 var defaultData = [
3 {
4 text: 'Parent 1',
5 href: '#parent1',
6 tags: ['4'],
7 state: {
8 checked: true
9 },
10 nodes: [
11 {
12 text: 'Child 1',
13 href: '#child1',
14 tags: ['2'],
15 nodes: [
16 {
17 text: 'Grandchild 1',
18 href: '#grandchild1',
19 tags: ['0']
20 },
21 {
22 text: 'Grandchild 2',
23 href: '#grandchild2',
24 tags: ['0']
25 }
26 ]
27 },
28 {
29 text: 'Child 2',
30 href: '#child2',
31 tags: ['0']
32 }
33 ]
34 },
35 {
36 text: 'Parent 2',
37 href: '#parent2',
38 tags: ['0'],
39 nodes: [
40 {
41 text: 'Child 1',
42 href: '#child1',
43 tags: ['2'],
44 nodes: [
45 {
46 text: 'Grandchild 1',
47 href: '#grandchild1',
48 tags: ['0']
49 },
50 {
51 text: 'Grandchild 2',
52 href: '#grandchild2',
53 tags: ['0']
54 }
55 ]
56 },
57 {
58 text: 'Child 2',
59 href: '#child2',
60 tags: ['0']
61 }
62 ]
63 },
64 {
65 text: 'Parent 3',
66 href: '#parent3'
67 },
68 {
69 text: 'Parent 4',
70 href: '#parent4',
71 tags: ['0']
72 },
73 {
74 text: 'Parent 5',
75 href: '#parent5',
76 tags: ['0']
77 }
78 ];
79
80 return defaultData;
81 }
View Code
3,JS資料綁定,加載TreeView
1 $(function() {
2 var $checkableTree = $('#treeview-checkable')
3 .treeview({
4 data: getTvStateData(), //資料
5 showIcon: false,
6 showCheckbox: true,
7 levels: 1,
8 onNodeChecked: function(event, node) { //選中節點
9 var selectNodes = getChildNodeIdArr(node); //擷取所有子節點
10 if (selectNodes) { //子節點不為空,則選中所有子節點
11 $('#treeview-checkable').treeview('checkNode', [selectNodes, { silent: true }]);
12 }
13 var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);
14 setParentNodeCheck(node);
15 },
16 onNodeUnchecked: function(event, node) { //取消選中節點
17 var selectNodes = getChildNodeIdArr(node); //擷取所有子節點
18 if (selectNodes) { //子節點不為空,則取消選中所有子節點
19 $('#treeview-checkable').treeview('uncheckNode', [selectNodes, { silent: true }]);
20 }
21 },
22 onNodeExpanded:
23 function(event, data) {
24 if (data.nodes === undefined || data.nodes === null) {
25
26 } else if (data.tags[0] === "2") {
27 alert("Tags 2");
28 } else {
29 alert("1111");
30 }
31 }
32 });
33 });
4,選中/取消選中父節點時,選中/取消選中所有子節點,以及選中所有子節點時,選中父節點
1 function getChildNodeIdArr(node) {
2 var ts = [];
3 if (node.nodes) {
4 for (x in node.nodes) {
5 ts.push(node.nodes[x].nodeId);
6 if (node.nodes[x].nodes) {
7 var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
8 for (j in getNodeDieDai) {
9 ts.push(getNodeDieDai[j]);
10 }
11 }
12 }
13 } else {
14 ts.push(node.nodeId);
15 }
16 return ts;
17 }
18
19 function setParentNodeCheck(node) {
20 var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);
21 if (parentNode.nodes) {
22 var checkedCount = 0;
23 for (x in parentNode.nodes) {
24 if (parentNode.nodes[x].state.checked) {
25 checkedCount ++;
26 } else {
27 break;
28 }
29 }
30 if (checkedCount === parentNode.nodes.length) {
31 $("#treeview-checkable").treeview("checkNode", parentNode.nodeId);
32 setParentNodeCheck(parentNode);
33 }
34 }
35 }