Regarding the problem that the treeview of bootstrap does not display multiple selections (check boxes), and the problem of linkage selection, plus the value after multiple selection

Recently, I used treeview in a project. Because it involves multiple selection, it is very tricky, so I decided to look at native JS to find out. You need to refer to the official bootstrap-treeview.js, you know, I won't say more about what you need to refer to. I believe many people have seen it on the Internet. Some people said to write showCheckbox: true; some people asked to write multiSelect: true. There are different opinions, but this blogger has tried many times, but it still doesn't work. Finally, he made up his mind and looked at the source code. You know, looking at the source code is a very time-consuming thing. I posted some key source code.

 

Smart people can see at a glance, what does default mean? default. That is to say, in the default configuration, there is no showCheckbox: true and multiSelect: true, so how can it work? ? ? In other words, the JS you quoted is not what you really want. Come, come, come again, look at another JS.

See, this JS has what we want. And very complete. Note that this JS of mine is defined after showCheckbox is '! 1', then'! What does 1' stand for? Spread the knowledge to everyone. In most browsers, 0 represents false and 1 represents true. Now, when you open the test page, you will find that the checkboxes come out.

If your checkbox still does not appear at this time, it means that either your data format is wrong, or your JS is wrong, or the field defined in the source code to display the checkbox is A, but you write B, then you don't will come out. If you don't implement checkboxes at this point, then you don't have to look down.

Next, let's realize the effect of linkage check.

Because, it can be said that the source code is indeed limited in power. It is already very powerful to make it under such complex conditions. If you read it again, you will also find that it is really difficult to write a public linkage effect! Then let's make it happen! For this, I would like to thank a blogger on the Internet, his idea is very good, and he helped me realize it. Let's look at the implementation part first, and then look at his ideas:

 

[javascript]  view plain copy  

 

1. $('#tree_ul_id').treeview({  
2.             levels: 1,  
3.             expandIcon: 'glyphicon glyphicon-chevron-right',  
4.         collapseIcon: 'glyphicon glyphicon-chevron-down',  
5.         nodeIcon: 'glyphicon glyphicon glyphicon-th-list',  
6.         selectedBackColor: false,  
7.         selectedColor: '#337AB7',  
8.         showCheckbox: 1, //The reason why 1 is written here is because I have defined 1 as true in the js source code  
9.         multiSelect: 1, //The reason why 1 is written here is because I have defined 1 as true in the js source code  
10.         data: put the data in the format it needs here,  
11.         onNodeChecked:  function(event, node) {  //Select the node  
12.                    var selectNodes = getChildNodeIdArr(node);  //Get all child nodes  
13.                    if (selectNodes) {  //The child node is not empty, then all child nodes are selected  
14.                        $('#tree_ul_id').treeview('checkNode', [selectNodes, { silent: true }]);  
15.                    }  
16.                    var parentNode = $("#tree_ul_id").treeview("getNode", node.parentId);  
17.                    setParentNodeCheck(node);  
18.                },  
19.                onNodeUnchecked:  function(event, node) {  //Uncheck the node  
20.                    var selectNodes = getChildNodeIdArr(node);  //Get all child nodes  
21.                    if (selectNodes) {  //The child node is not empty, then uncheck all child nodes  
22.                        $('#tree_ul_id').treeview('uncheckNode', [selectNodes, { silent: true }]);  
23.                    }  
24.                }  
25.             });  

Let's look at the logic again:

 

[javascript]  view plain copy  

 

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. }  

 

[javascript]  view plain copy  

 

1. function setParentNodeCheck(node) {  
2.     var parentNode = $("#tree_ul_id").treeview("getNode", node.parentId);  
3.     if (parentNode.nodes) {  
4.         var checkedCount = 0;  
5.         for (x in parentNode.nodes) {  
6.             if (parentNode.nodes[x].state.checked) {  
7.                 checkedCount ++;  
8.             } else {  
9.                 break;  
10.             }  
11.         }  
12.         if (checkedCount === parentNode.nodes.length) {  
13.             $("#tree_ul_id").treeview("checkNode", parentNode.nodeId);  
14.             setParentNodeCheck(parentNode);  
15.         }  
16.     }  
17. }  

Enter the above code directly, and then change the corresponding ID to complete. It is worth mentioning here that when traversing child nodes, recursion is good. Due to the huge amount of data, recursion is the best choice. Please see the renderings:

I deliberately ticked two off, still the way we wanted, and for that, mission accomplished.

As the saying goes, help people to the end, and send Buddha to the West. Let's talk about how to choose more values. One sentence thing: $('#tree_ul_id').treeview('getChecked');