Bootstrap treeview实现动态加载数据并添加快捷搜索功能

Bootstrap treeview实现动态加载数据并添加快捷搜索功能

写在前面：

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

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

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

好了，话不多说，开整。

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

最终效果展示：

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

二、前台页面

1.页面引入

2.页面展示区

快捷搜索:

**_ _**

搜索

清除

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 = '

' + results.length + ' 匹配的搜索结果

$.each(results, function (index, result) {

output += '

- ' + result.text + '

});

$('#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

List areaInfo=new ArrayList<>();

try {

//获取缓存中的省市区信息（本项目直接从缓存中获取，也可以单独写方法到Service、Dao层查询）

EcncSysConfig sysConfig = new EcncSysConfig();

areaInfo = sysConfig.INIT_SYS_ECNC_AREAVO;

} catch (Throwable e) {

e.printStackTrace();

}

//盛放省份

List

for (AreaVO areaVO : areaInfo) {

Map map= new HashMap<>();

if("2".equals(areaVO.getGrade())){

map.put("text", areaVO.getName());

//盛放地市

List

for (AreaVO cVO : areaInfo) {

Map cMap=new HashMap<&MfrAvgt;();

if (cVO.getParentId() != null && cVO.getParentId().equals(areaVO.getId())) {

cMap.put("text", cVO.getName());

//盛放区县

List

for (AreaVO rVO : areaInfo) {

Map 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实现动态加载数据并添加快捷搜索功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。