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("省市区地域信息加载失败!")
}
});
});
@H_301 _37@
三、后台 主要代码 后台 采用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 result=new ArrayList<>();
for (AreaVO areaVO : areaInfo) {
Map map= new HashMap<>();
if("2".equals(areaVO.getGrade())){
map.put("text",areaVO.getName());
//盛放地市
List cList=new ArrayList<>();
for (AreaVO cVO : areaInfo) {
Map cMap=new HashMap<>();
if (cVO.getParentId() != null && cVO.getParentId().equals(areaVO.getId())) {
cMap.put("text",cVO.getName());
//盛放区县
List rList=new ArrayList<>();
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;
}
@H_301 _37@
总结
以上所述是小编给大家介绍的Bootstrap treeview实现动态加载数据并添加 快捷搜索 功能 ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言!