A simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View) while leveraging the best that Twitter Bootstrap has to offer.
這是Bootstrap Tree View在git上的簡介。
注意simple、elegant，簡單而優雅，我喜歡這兩個詞。
那么今天的實例是通過Bootstrap Tree View來制作一款省市級菜單的應用。
一、效果圖
二、應用
①、首先，項目需要引入bootstrap.css、jquery.js、bootstrap-treeview.js
<link type="text/css" rel="stylesheet" href="${ctx}/components/bootstrap/css/bootstrap.min.css" rel="external nofollow" /><script type="text/javascript" src="${ctx}/components/jquery/jquery-1.10.1.min.js"></script><script type="text/javascript" src="${ctx}/components/treeview/js/bootstrap-treeview.js"></script>②、接下來，頁面上需要放一個dom元素。
<div id="procitytree" style="height: 400px;overflow-y :scroll;"></div>
通過設置height和overflow-y，使treeview能夠在垂直方向上出現滾動條。
③、由于省市級數據一般都是固定不變的，那么頁面初次加載時，我們把省市級數據先拿到。
Java端非常簡單：
@RequestMapping(value = "loadProcitysInfo")public void loadProcitysInfo(HttpServletResponse response) { logger.debug("獲取所有省市"); try { List<Provincial> provincials = provincialService.getProvincials(); for (Provincial provincial : provincials) { List<City> citys = cityService.getCitysByProvincialId(provincial.getId()); provincial.setCitys(citys); } renderJsonDone(response, provincials); } catch (Exception e) { logger.error(e.getMessage(), e); logger.error(e.getMessage()); renderJsonError(response, Constants.SERVER_ERROR); }}這段代碼需要優化，通過mybatis其實可以一次就獲得省級和市級的集合。
獲取數據后，通過json寫入到response中。
protected void renderJsonDone(HttpServletResponse response, final Object value) { Map<String, Object> map = new HashMap<String, Object>(); map.put("statusCode", 200); map.put("result", value); String jsonText = JSON.toJSONString(map); PrintWriter writer = null; try { response.setHeader("Pragma", "no-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); response.setContentType(contentType); writer = response.getWriter(); writer.write(jsonText); writer.flush(); } catch (IOException e) { throw new OrderException(e.getMessage()); } finally { if (writer != null) writer.close(); }}前端通過ajax對數據進行組裝保存。
jQuery.ajax({ url : common.ctx + "/procity/loadProcitysInfo", // 請求的URL dataType : 'json', async : false, timeout : 50000, cache : false, success : function(response) { var json = YUNM.jsonEval(response); if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) { var records = json[YUNM.keys.result]; if (!json) return; // 城市列表都存在 if (records != null && records.length > 0) { // 遍歷子節點 $.each(records, function(index, value) { var proNode = {}; // text是顯示的內容 proNode["text"] = value.proname; proNode["id"] = value.id; proNode["procode"] = value.procode; // 節點不可選中 proNode["selectable"] = false; // 初始化市級節點 proNode["nodes"] = []; $.each(value.citys, function(index, value) { var cityNode = {}; cityNode["text"] = value.cname; cityNode["id"] = value.id; cityNode["proid"] = value.proid; cityNode["code"] = value.code; // 節點不可選中 cityNode["selectable"] = false; proNode["nodes"].push(cityNode); }); // 保存頁面端對象中 //YUNM._set.procityTreeData的數據結構就是二維數組。 YUNM._set.procityTreeData.push(proNode); }); } } }});④、拿到數據之后，就可以對treeview進行初始化了。
這里，我們講一點更復雜的應用，如下圖。
如果用戶已經保存過一部分節點，那么初次展示的時候就需要通過treeview展示出來了。
我們定一些規則：
節點全部選中時color為red，check框選中。
節點未全部選中時color為red，check框未選中。
節點一個也沒選中時color為默認，check框未選中。
為此，我們需要增加一點css。
/* 樹形省市 */.treeview .list-group-item.node-checked { color: red;}.treeview .list-group-item.node-selected { color: red;}有了這個規則，我們在初次展開treeview的時候，就需要重新制定以下數據規則。
// 省市級數據var procityTreeData = YUNM._set.procityTreeData;// 用戶已經選中的城市，比如河南洛陽。var init_code = $this.next("input[name=area]").val();// 如果用戶有選中項，則對選中項進行規則展示if (init_code) { // 初始化選中項目 $.each(procityTreeData, function(index, value) { // 通過i和省級的節點length進行對比，判斷是否全選、未全選、全未選三種狀態 var i = 0; $.each(value.nodes, function(index1, value1) { if (init_code.indexOf(value1.code) != -1) { // 選中時先初始化state，再把state.checked設為true value1["state"] = {}; value1["state"]["checked"] = true; i++; } else { // 否則重置state，保證procityTreeData數據的不被更改 // 這個地方其實有待優化，由于js我還不算精通，所以不知道怎么把數組復制到一個新數組里，保證原始屬于不被更改 value1["state"] = {}; } }); value["state"] = {}; // 市級節點有選中，那么省級節點的狀態需要變化，根據上面制定的規則來 if (i > 0) { // 市級全選，那么此時省級節點打鉤 if (value.nodes.length == i) { value["state"]["checked"] = true; } // 根據selected來設定顏色 value["state"]["selected"] = true; } else { value["state"]["selected"] = false; } });}讓treeview和我們打個招呼吧！
$("#procitytree").treeview({ data : procityTreeData,// 賦值 highlightSelected : false,// 選中項不高亮，避免和上述制定的顏色變化規則沖突 multiSelect : false,// 不允許多選，因為我們要通過check框來控制 showCheckbox : true,// 展示checkbox }).treeview('collapseAll', {// 節點展開 silent : true});⑤、節點onNodeChecked、onNodeUnchecked的應用
不要⑤就夠了嗎？
不夠，我們還要控制節點選擇框的變化。
就像效果圖中那樣。
onNodeChecked : function(event, node) { YUNM.debug("選中項目為：" + node); // 省級節點被選中，那么市級節點都要選中 if (node.nodes != null) { $.each(node.nodes, function(index, value) { $this.treeview('checkNode', value.nodeId, { silent : true }); }); } else { // 市級節點選中的時候，要根據情況判斷父節點是否要全部選中 // 父節點 var parentNode = $this.treeview('getParent', node.nodeId); var isAllchecked = true; // 是否全部選中 // 當前市級節點的所有兄弟節點，也就是獲取省下面的所有市 var siblings = $this.treeview('getSiblings', node.nodeId); for ( var i in siblings) { // 有一個沒選中，則不是全選 if (!siblings[i].state.checked) { isAllchecked = false; break; } } // 全選，則打鉤 if (isAllchecked) { $this.treeview('checkNode', parentNode.nodeId, { silent : true }); } else {// 非全選，則變紅 $this.treeview('selectNode', parentNode.nodeId, { silent : true }); } }},onNodeUnchecked : function(event, node) { YUNM.debug("取消選中項目為：" + node); // 選中的是省級節點 if (node.nodes != null) { // 這里需要控制，判斷是否是因為市級節點引起的父節點被取消選中 // 如果是，則只管取消父節點就行了 // 如果不是，則子節點需要被取消選中 if (silentByChild) { $.each(node.nodes, function(index, value) { $this.treeview('uncheckNode', value.nodeId, { silent : true }); }); } } else { // 市級節點被取消選中 var parentNode = $this.treeview('getParent', node.nodeId); var isAllUnchecked = true; // 是否全部取消選中 // 市級節點有一個選中，那么就不是全部取消選中 var siblings = $this.treeview('getSiblings', node.nodeId); for ( var i in siblings) { if (siblings[i].state.checked) { isAllUnchecked = false; break; } } // 全部取消選中，那么省級節點恢復到默認狀態 if (isAllUnchecked) { $this.treeview('unselectNode', parentNode.nodeId, { silent : true, }); $this.treeview('uncheckNode', parentNode.nodeId, { silent : true, }); } else { silentByChild = false; $this.treeview('selectNode', parentNode.nodeId, { silent : true, }); $this.treeview('uncheckNode', parentNode.nodeId, { silent : true, }); } } silentByChild = true;},到這里，treeview的應用已經算是非常全面了
以上所述是小編給大家介紹的Bootstrap Tree View簡單而優雅的樹結構組件實例解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
