最近做項(xiàng)目用到了treeview。因?yàn)樯婕暗蕉噙x的問題，很是棘手，于是乎，我決定查看原生JS，探個(gè)究竟。需要引用官方的bootstrap-treeview.js都知道吧，對于所需要引用的，我就不多說了。相信很多人都在網(wǎng)上看到了，有的人說要寫showCheckbox：true；有的人又讓寫multiSelect：true。眾說紛紜的，但是本博主試了多次，仍不起作用，最后痛下決心，看源碼。要知道，看源碼是很費(fèi)時(shí)間的事情。我把部分關(guān)鍵源碼貼出來。
聰明的人一眼就能看出來，default是什么意思？默認(rèn)。也就是說，在默認(rèn)的配置里面，并沒有showCheckbox：true和multiSelect：true，那么它怎么可能起作用呢？？？也就是說，你引的JS，并不是你真正想要的。來來來，再來，再看一個(gè)JS。
看到了嗎，這個(gè)JS才有我們想要的東西。而且十分全。注意，我的這個(gè)JS在showCheckbox后面定義的是‘！1’，那么‘！1’代表什么意思呢？給大家普及一個(gè)知識吧。大部分瀏覽器里，0代表false，1代表true，現(xiàn)在，在打開測試頁，你就會(huì)發(fā)現(xiàn)，復(fù)選框出來了。
如果此時(shí)你的復(fù)選框還是沒有出來，說明要么你數(shù)據(jù)格式不對，要么你引得JS不對，或者人家源碼里定義的顯示復(fù)選框的字段為A，而你偏偏寫個(gè)B，那就不會(huì)出來。如果此時(shí)你沒有實(shí)現(xiàn)復(fù)選框，那么你就不必往下看了。
接下來，我們來實(shí)現(xiàn)聯(lián)動(dòng)勾選的效果。
因?yàn)?#xff0c;源碼里可以說確實(shí)是力量有限，在那么復(fù)雜的條件判斷下做出來的，已經(jīng)很厲害了，如果你讀一遍，你也會(huì)發(fā)現(xiàn)，要寫個(gè)公共的聯(lián)動(dòng)效果真的很難！那我們就自己實(shí)現(xiàn)吧！這一點(diǎn)，我要感謝網(wǎng)上某個(gè)博主，他的思路很好，幫助我實(shí)現(xiàn)了。先看下實(shí)現(xiàn)部分，再看他思路：
[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:?這里放它需要的格式的數(shù)據(jù),??????????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);??????????}??????}??}??
把以上代碼直接考進(jìn)去，然后改下對應(yīng)的ID就完成了。這里值得一提是遍歷子節(jié)點(diǎn)時(shí)，遞歸用的卻是不錯(cuò)，由于數(shù)據(jù)量十分龐大，層層迭代，遞歸是不二之選。請看效果圖：
我故意勾選掉了兩個(gè)，仍然是我們想要的樣子，為此，任務(wù)完成。
俗話說，幫人幫到底，送佛送上西。來說說，怎么樣多選取值吧。一句話的事：$('#tree_ul_id').treeview('getChecked');
總結(jié)
以上是生活随笔為你收集整理的关于bootstrap的treeview不显示多选(复选框)的问题，以及联动选择的问题，外加多选后取值...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
