写在前面：
jQuery多级列表树插件基于Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等。
实用Bootstrap树形菜单特效插件Bootstrap Tree View，非常不错的Bootstrap插件，现在很多Bootstrap制作的页面都需要此功能，此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持，支持众多参数自定义功能，颜色、背景色、图标、链接等，还是很不错的。
具体效果请暂时移步： nofollow" href="http://jonmiles.github.io/bootstrap-treeview/">http://jonmiles.github.io/bootstrap-treeview/
好了，话不多说，开整。
要求用户能够快速查询到省市区的区域名称信息（给用户参考，用于规范书写导入模板），并且以树形结构展示。
最终效果展示：
一、 数据表结构 数据源为省市区地域信息表，该表为自关联结构。如图：
1.页面引入
2.页面展示区
3.js 脚本
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 = '
' + results.length + ' 匹配的搜索结果
'; $.each(results,function (index,result) { output += '-
'; }); $('#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层代码
queryAreaInfo() {
List areaInfo=new ArrayList<>();
try {
//获取缓存中的省市区信息（本项目直接从缓存中获取，也可以单独写方法到Service、Dao层查询）
EcncSysConfig sysConfig = new EcncSysConfig();
areaInfo = sysConfig.INIT_SYS_ECNC_AREAVO;
} catch (Throwable e) {
e.printStackTrace();
}
//盛放省份
List
总结
以上所述是小编给大家介绍的Bootstrap treeview实现动态加载数据并添加快捷搜索功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言！
原文链接：https://www.f2er.com/bootstrap/34295.html