Bootstrap treeview實(shí)現(xiàn)動態(tài)加載數(shù)據(jù)并添加快捷搜索功能

<link rel="stylesheet" href="項(xiàng)目靜態(tài)資源路徑/bootstrap-treeview/css/bootstrap.css" rel="external nofollow" >
 <script type="text/javascript" src="項(xiàng)目靜態(tài)資源路徑/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
 <script type="text/javascript" src="項(xiàng)目靜態(tài)資源路徑/bootstrap/bootstrap.js"></script>
 <script type="text/javascript" src="項(xiàng)目靜態(tài)資源路徑/bootstrap-treeview/js/jquery.js"></script>
 <script type="text/javascript" src="項(xiàng)目靜態(tài)資源路徑/bootstrap-treeview/js/bootstrap-treeview.js"> </script>

<!-- 省市區(qū)地域查詢展示 -->
 <div class="container">
 <div class="row">
 <div class="col-sm-4">
 <h4>快捷搜索</h4>
 <!-- <form> -->
 <div class="form-group">
 <label for="input-search" class="sr-only">快捷搜索:</label>
 <input type="input" class="form-control" id="input-search" placeholder="請輸入要查詢的省市區(qū)名稱信息..." value="">
 </div>
 **_ <!-- 該部分為復(fù)選框，用于豐富搜索體驗(yàn)，本文忽略
<div class="checkbox">
 <label>
 <input type="checkbox" class="checkbox" id="chk-ignore-case" value="false"/>
 忽略大小寫
 </label>
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox" class="checkbox" id="chk-exact-match" value="false">
 準(zhǔn)確匹配
 </label>
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox" class="checkbox" id="chk-reveal-results" value="false">
 顯示結(jié)果
 </label>
 </div> -->_**
 <button type="button" class="btn btn-success" id="btn-search">搜索</button>
 <button type="button" class="btn btn-default" id="btn-clear-search">清除</button>
 <!-- </form> -->
 </div>
 <div class="col-sm-4">
 <h4>省市區(qū)名稱層級樹</h4>
 <div id="treeview-searchable" class=""></div>
 </div>
 <div class="col-sm-4">
 <h4>查詢結(jié)果展示</h4>
 <div id="search-output"></div>
 </div>
 </div>
 </div>

$(function () {
 var defaultData;
 $.ajax({
 type: "post",
 url: "項(xiàng)目請求路徑方法.json",
 dataType: "json",
 success: function (result) { 
 defaultData=result;
 var initSearchableTree = function() {
 return $('#treeview-searchable').treeview({
 data: defaultData,
 nodeIcon: 'glyphicon glyphicon-globe',
 emptyIcon: '', //沒有子節(jié)點(diǎn)的節(jié)點(diǎn)圖標(biāo)
 //collapsed: true,
 });
 };
 var $searchableTree = initSearchableTree();
 $('#treeview-searchable').treeview('collapseAll', { 
 silent : false//設(shè)置初始化節(jié)點(diǎn)關(guān)閉
 });
 var findSearchableNodes = function() {
 return $searchableTree.treeview('search', [ $.trim($('#input-search').val()), { ignoreCase: false, exactMatch: false } ]);
 };
 var searchableNodes = findSearchableNodes();
 // Select/unselect/toggle nodes
 $('#input-search').on('keyup', function (e) {
 var str = $('#input-search').val(); 
 if($.trim(str).length>0){
 searchableNodes = findSearchableNodes();
 } else {
 $('#treeview-searchable').treeview('collapseAll', { 
 silent : false //設(shè)置初始化節(jié)點(diǎn)關(guān)閉
 });
 }
 //$('.select-node').prop('disabled', !(searchableNodes.length >= 1));
 });
 var search = function(e) {
 var pattern = $.trim($('#input-search').val());
 var options = {
 ignoreCase: $('#chk-ignore-case').is(':checked'),
 exactMatch: $('#chk-exact-match').is(':checked'),
 revealResults: $('#chk-reveal-results').is(':checked')
 };
 var results = $searchableTree.treeview('search', [ pattern, options ]);
 var output = '<p>' + results.length + ' 匹配的搜索結(jié)果</p>';
 $.each(results, function (index, result) {
 output += '<p>- <span style="color:red;">' + result.text + '</span></p>';
 });
 $('#search-output').html(output);
 }
 $('#btn-search').on('click', search);
 $('#input-search').on('keyup', search);
 $('#btn-clear-search').on('click', function (e) {
 $searchableTree.treeview('clearSearch');
 $('#input-search').val('');
 $('#search-output').html('');
 $('#treeview-searchable').treeview('collapseAll', {
 silent : false//設(shè)置初始化節(jié)點(diǎn)關(guān)閉
 });
 });
 
 },
 error: function () {
 alert("省市區(qū)地域信息加載失敗！")
 }
 });
 });

@ResponseBody
@RequestMapping(value = "/queryAreaInfo", method = { RequestMethod.POST }, produces = MediaType.APPLICATION_JSON_VALUE)
 public List<Object> queryAreaInfo() {
 List<AreaVO> areaInfo=new ArrayList<>();
 try {
 //獲取緩存中的省市區(qū)信息（本項(xiàng)目直接從緩存中獲取，也可以單獨(dú)寫方法到Service、Dao層查詢）
 EcncSysConfig sysConfig = new EcncSysConfig();
 areaInfo = sysConfig.INIT_SYS_ECNC_AREAVO;
 } catch (Throwable e) {
 e.printStackTrace();
 }
 //盛放省份
 List<Object> result=new ArrayList<>();
 for (AreaVO areaVO : areaInfo) {
 Map<String, Object> map= new HashMap<>();
 if("2".equals(areaVO.getGrade())){
 map.put("text", areaVO.getName());
 //盛放地市
 List<Object> cList=new ArrayList<>();
 for (AreaVO cVO : areaInfo) {
 Map<String, Object> cMap=new HashMap<>();
 if (cVO.getParentId() != null && cVO.getParentId().equals(areaVO.getId())) {
 cMap.put("text", cVO.getName());
 //盛放區(qū)縣
 List<Object> rList=new ArrayList<>();
 for (AreaVO rVO : areaInfo) {
 Map<String, Object> rMap=new HashMap<>();
 if (cVO.getId().equals(rVO.getParentId())) {
 rMap.put("text", rVO.getName());
 rList.add(rMap);
 }
 }
 cMap.put("nodes", rList);
 cList.add(cMap);
 }
 }
 map.put("nodes", cList);
 result.add(map);
 }
 }
 return result;
 }