這篇文章主要介紹Bootstrap中如何使用Tree View，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

河口ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

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，簡單而優(yōu)雅，我喜歡這兩個詞。

一、效果圖

 
 
 

二、應用

①、首先，項目需要引入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" ></div>

通過設置height和overflow-y，使treeview能夠在垂直方向上出現(xiàn)滾動條。

③、由于省市級數(shù)據(jù)一般都是固定不變的，那么頁面初次加載時，我們把省市級數(shù)據(jù)先拿到。

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);
 }
}

這段代碼需要優(yōu)化，通過mybatis其實可以一次就獲得省級和市級的集合。

獲取數(shù)據(jù)后，通過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對數(shù)據(jù)進行組裝保存。

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) {
    // 遍歷子節(jié)點
    $.each(records, function(index, value) {
     var proNode = {};
     // text是顯示的內(nèi)容
     proNode["text"] = value.proname;
     proNode["id"] = value.id;
     proNode["procode"] = value.procode;
     // 節(jié)點不可選中
     proNode["selectable"] = false;
     // 初始化市級節(jié)點
     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;
      // 節(jié)點不可選中
      cityNode["selectable"] = false;

      proNode["nodes"].push(cityNode);
     });
     // 保存頁面端對象中
     //YUNM._set.procityTreeData的數(shù)據(jù)結構就是二維數(shù)組。
     YUNM._set.procityTreeData.push(proNode);
    });
   }
  }
 }
});

④、拿到數(shù)據(jù)之后，就可以對treeview進行初始化了。

這里，我們講一點更復雜的應用，如下圖。

如果用戶已經(jīng)保存過一部分節(jié)點，那么初次展示的時候就需要通過treeview展示出來了。
我們定一些規(guī)則：

節(jié)點全部選中時color為red，check框選中。

節(jié)點未全部選中時color為red，check框未選中。

節(jié)點一個也沒選中時color為默認，check框未選中。

為此，我們需要增加一點css。

/* 樹形省市 */
.treeview .list-group-item.node-checked {
 color: red;
}
.treeview .list-group-item.node-selected {
 color: red;
}

有了這個規(guī)則，我們在初次展開treeview的時候，就需要重新制定以下數(shù)據(jù)規(guī)則。

// 省市級數(shù)據(jù)
var procityTreeData = YUNM._set.procityTreeData;
// 用戶已經(jīng)選中的城市，比如河南洛陽。
var init_code = $this.next("input[name=area]").val();
// 如果用戶有選中項，則對選中項進行規(guī)則展示
if (init_code) {
 // 初始化選中項目
 $.each(procityTreeData, function(index, value) {
  // 通過i和省級的節(jié)點length進行對比，判斷是否全選、未全選、全未選三種狀態(tài)
  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數(shù)據(jù)的不被更改
    // 這個地方其實有待優(yōu)化，由于js我還不算精通，所以不知道怎么把數(shù)組復制到一個新數(shù)組里，保證原始屬于不被更改
    value1["state"] = {};
   }
  });
  value["state"] = {};
  // 市級節(jié)點有選中，那么省級節(jié)點的狀態(tài)需要變化，根據(jù)上面制定的規(guī)則來
  if (i > 0) {
   // 市級全選，那么此時省級節(jié)點打鉤
   if (value.nodes.length == i) {
    value["state"]["checked"] = true;
   }
   // 根據(jù)selected來設定顏色
   value["state"]["selected"] = true;
  } else {
   value["state"]["selected"] = false;
  }
 });
}

讓treeview和我們打個招呼吧！

$("#procitytree").treeview({
 data : procityTreeData,// 賦值
 highlightSelected : false,// 選中項不高亮，避免和上述制定的顏色變化規(guī)則沖突
 multiSelect : false,// 不允許多選，因為我們要通過check框來控制
 showCheckbox : true,// 展示checkbox
 }).treeview('collapseAll', {// 節(jié)點展開
 silent : true
});

⑤、節(jié)點onNodeChecked、onNodeUnchecked的應用

不要⑤就夠了嗎？

不夠，我們還要控制節(jié)點選擇框的變化。

就像效果圖中那樣。

 
 

onNodeChecked : function(event, node) {
 YUNM.debug("選中項目為：" + node);
 // 省級節(jié)點被選中，那么市級節(jié)點都要選中
 if (node.nodes != null) {
  $.each(node.nodes, function(index, value) {
   $this.treeview('checkNode', value.nodeId, {
    silent : true
   });
  });
 } else {
  // 市級節(jié)點選中的時候，要根據(jù)情況判斷父節(jié)點是否要全部選中
  // 父節(jié)點
  var parentNode = $this.treeview('getParent', node.nodeId);
  var isAllchecked = true; // 是否全部選中
  // 當前市級節(jié)點的所有兄弟節(jié)點，也就是獲取省下面的所有市
  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);
 // 選中的是省級節(jié)點
 if (node.nodes != null) {
  // 這里需要控制，判斷是否是因為市級節(jié)點引起的父節(jié)點被取消選中
  // 如果是，則只管取消父節(jié)點就行了
  // 如果不是，則子節(jié)點需要被取消選中
  if (silentByChild) {
   $.each(node.nodes, function(index, value) {
    $this.treeview('uncheckNode', value.nodeId, {
     silent : true
    });
   });
  }
 } else {
  // 市級節(jié)點被取消選中
  var parentNode = $this.treeview('getParent', node.nodeId);
  var isAllUnchecked = true; // 是否全部取消選中
  // 市級節(jié)點有一個選中，那么就不是全部取消選中
  var siblings = $this.treeview('getSiblings', node.nodeId);
  for ( var i in siblings) {
   if (siblings[i].state.checked) {
    isAllUnchecked = false;
    break;
   }
  }
  // 全部取消選中，那么省級節(jié)點恢復到默認狀態(tài)
  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;
},

以上是“Bootstrap中如何使用Tree View”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：Bootstrap中如何使用TreeView
網(wǎng)站路徑：http://www.chinadenli.net/article14/geihge.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設、電子商務、面包屑導航、虛擬主機、手機網(wǎng)站建設、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)