最近做項目用到了treeview。因為涉及到多選的問題，很是棘手，于是乎，我決定查看原生JS，探個究竟。需要引用官方的bootstrap-treeview.js都知道吧，對于所需要引用的，我就不多說了。相信很多人都在網上看到了，有的人說要寫showCheckbox：true；有的人又讓寫multiSelect：true。眾說紛紜的，但是本博主試了多次，仍不起作用，最后痛下決心，看源碼。要知道，看源碼是很費時間的事情。我把部分關鍵源碼貼出來。
聰明的人一眼就能看出來，default是什么意思？默認。也就是說，在默認的配置里面，并沒有showCheckbox：true和multiSelect：true，那么它怎么可能起作用呢？？？也就是說，你引的JS，并不是你真正想要的。來來來，再來，再看一個JS。
看到了嗎，這個JS才有我們想要的東西。而且十分全。注意，我的這個JS在showCheckbox后面定義的是‘！1’，那么‘！1’代表什么意思呢？給大家普及一個知識吧。大部分瀏覽器里，0代表false，1代表true，現在，在打開測試頁，你就會發現，復選框出來了。
如果此時你的復選框還是沒有出來，說明要么你數據格式不對，要么你引得JS不對，或者人家源碼里定義的顯示復選框的字段為A，而你偏偏寫個B，那就不會出來。如果此時你沒有實現復選框，那么你就不必往下看了。
接下來，我們來實現聯動勾選的效果。
因為，源碼里可以說確實是力量有限，在那么復雜的條件判斷下做出來的，已經很厲害了，如果你讀一遍，你也會發現，要寫個公共的聯動效果真的很難！那我們就自己實現吧！這一點，我要感謝網上某個博主，他的思路很好，幫助我實現了。先看下實現部分，再看他思路：
[javascript]?view plain
?copy $('#tree_ul_id').treeview({??????????????levels:?1,??????????????expandIcon:?'glyphicon?glyphicon-chevron-right',??????????collapseIcon:?'glyphicon?glyphicon-chevron-down',??????????nodeIcon:?'glyphicon?glyphicon?glyphicon-th-list',??????????selectedBackColor:?false,??????????selectedColor:?'#337AB7',??????????showCheckbox:?1,????????multiSelect:?1,????????data:?這里放它需要的格式的數據,??????????onNodeChecked:?function(event,?node)?{????????????????????var?selectNodes?=?getChildNodeIdArr(node);????????????????????if?(selectNodes)?{????????????????????????$('#tree_ul_id').treeview('checkNode',?[selectNodes,?{?silent:?true?}]);?????????????????????}?????????????????????var?parentNode?=?$("#tree_ul_id").treeview("getNode",?node.parentId);?????????????????????setParentNodeCheck(node);?????????????????},?????????????????onNodeUnchecked:?function(event,?node)?{????????????????????var?selectNodes?=?getChildNodeIdArr(node);????????????????????if?(selectNodes)?{????????????????????????$('#tree_ul_id').treeview('uncheckNode',?[selectNodes,?{?silent:?true?}]);?????????????????????}?????????????????}??????????????});?? 再來看邏輯原理：
[javascript]?view plain
?copy function?getChildNodeIdArr(node)?{??????var?ts?=?[];??????if?(node.nodes)?{??????????for?(x?in?node.nodes)?{??????????????ts.push(node.nodes[x].nodeId);??????????????if?(node.nodes[x].nodes)?{??????????????????var?getNodeDieDai?=?getChildNodeIdArr(node.nodes[x]);??????????????????for?(j?in?getNodeDieDai)?{??????????????????????ts.push(getNodeDieDai[j]);??????????????????}??????????????}??????????}??????}?else?{??????????ts.push(node.nodeId);??????}??????return?ts;??}?? [javascript]?view plain
?copy function?setParentNodeCheck(node)?{??????var?parentNode?=?$("#tree_ul_id").treeview("getNode",?node.parentId);??????if?(parentNode.nodes)?{??????????var?checkedCount?=?0;??????????for?(x?in?parentNode.nodes)?{??????????????if?(parentNode.nodes[x].state.checked)?{??????????????????checkedCount?++;??????????????}?else?{??????????????????break;??????????????}??????????}??????????if?(checkedCount?===?parentNode.nodes.length)?{??????????????$("#tree_ul_id").treeview("checkNode",?parentNode.nodeId);??????????????setParentNodeCheck(parentNode);??????????}??????}??}??
把以上代碼直接考進去，然后改下對應的ID就完成了。這里值得一提是遍歷子節點時，遞歸用的卻是不錯，由于數據量十分龐大，層層迭代，遞歸是不二之選。請看效果圖：
我故意勾選掉了兩個，仍然是我們想要的樣子，為此，任務完成。
俗話說，幫人幫到底，送佛送上西。來說說，怎么樣多選取值吧。一句話的事：$('#tree_ul_id').treeview('getChecked');
總結
以上是生活随笔為你收集整理的关于bootstrap的treeview不显示多选(复选框)的问题，以及联动选择的问题，外加多选后取值...的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
