写在前面：

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" rel="external nofollow" >
 <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;
 }

总结

以上所述是小编给大家介绍的Bootstrap treeview实现动态加载数据并添加快捷搜索功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言！