Bootstrap中如何使用Tree View

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

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.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能夠在垂直方向上出現滾動條。

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

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

以上是“Bootstrap中如何使用Tree View”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！