Bootstrap treeview实现动态加载数据（带搜索）

写在前面：

jQuery多级列表树插件基于Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等。

实用Bootstrap树形菜单特效插件Bootstrap Tree View，非常不错的Bootstrap插件，现在很多Bootstrap制作的页面都需要此功能，此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持，支持众多参数自定义功能，颜色、背景色、图标、链接等，还是很不错的。

具体效果请暂时移步：http://jonmiles.github.io/bootstrap-treeview/

好了，话不多说，开整。

要求用户能够快速查询到省市区的区域名称信息（给用户参考，用于规范书写导入模板），并且以树形结构展示。

最终效果展示：

一、 数据表结构 数据源为省市区地域信息表，该表为自关联结构。如图：

二、前台页面

1. 页面引入

    <link rel="stylesheet" href="项目静态资源路径/bootstrap-treeview/css/bootstrap.css">
    <script type="text/javascript" src="项目静态资源路径/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="项目静态资源路径/bootstrap/bootstrap.js"></script>
    <script type="text/javascript" src="项目静态资源路径/bootstrap-treeview/js/jquery.js"></script>
    <script type="text/javascript" src="项目静态资源路径/bootstrap-treeview/js/bootstrap-treeview.js">    </script>

2. 页面展示区

    <!-- 省市区地域查询展示 -->
    <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="请输入要查询的省市区名称信息..." value="">
            </div>
           **_ <!-- 该部分为复选框，用于丰富搜索体验，本文忽略
<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">
                	准确匹配
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" class="checkbox" id="chk-reveal-results" value="false">
                 	显示结果
              </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>省市区名称层级树</h4>
          <div id="treeview-searchable" class=""></div>
        </div>
        <div class="col-sm-4">
          <h4>查询结果展示</h4>
          <div id="search-output"></div>
        </div>
      </div>
      </div>

3. js 脚本

		$(function () {
		    var defaultData;
		        $.ajax({
		            type: "post",
		            url: "项目请求路径方法.json",
		            dataType: "json",
		            success: function (result) { 
		            	defaultData=result;
		                var initSearchableTree = function() {
	                	  return $('#treeview-searchable').treeview({
	                	    data: defaultData,
	                	    nodeIcon: 'glyphicon glyphicon-globe',
		                    emptyIcon: '', //没有子节点的节点图标
		                    //collapsed: true,
	                	  });
	                	};
	                	var $searchableTree = initSearchableTree();
	                	$('#treeview-searchable').treeview('collapseAll', { 
		            		 silent : false//设置初始化节点关闭
		            	});
	                	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  //设置初始化节点关闭
	   		            		});
	                		}
	                	  //$('.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 + ' 匹配的搜索结果</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//设置初始化节点关闭
   		            		});
		                  });
		            	
		            },
		            error: function () {
		                alert("省市区地域信息加载失败！")
		            }
		        });
		    });

三、后台主要代码 后台采用SpringMVC+Spring+Mybatis框架， 以下为Controller层代码

@ResponseBody
@RequestMapping(value = "/queryAreaInfo", method = { RequestMethod.POST }, produces = MediaType.APPLICATION_JSON_VALUE)
	public List<Object> queryAreaInfo() {
		List<AreaVO> areaInfo=new ArrayList<>();
		try {
			//获取缓存中的省市区信息（本项目直接从缓存中获取，也可以单独写方法到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());
						
						//盛放区县
						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;
	}

写在后面：因水平有限，欢迎交流指正，共同进步！ 欢迎任何形式的转载，但请务必注明出处。

转载于:https://my.oschina.net/u/3489495/blog/1526969