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


Posted in Javascript onJanuary 07, 2018

写在前面:

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

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

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

好了,话不多说,开整。

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

最终效果展示:

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

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

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

Javascript 相关文章推荐
jQuery中调用WebService方法小结
Mar 28 Javascript
javascript测试题练习代码
Oct 10 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
js实现图片无缝滚动
Dec 23 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue实现登录后页面跳转到之前页面
Jan 07 #Javascript
Nginx 配置多站点vhost 的方法
Jan 07 #Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 #Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 #Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 #Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 #Javascript
12条写出高质量JS代码的方法
Jan 07 #Javascript
You might like
php中对2个数组相加的函数
2011/06/24 PHP
sina的lightbox效果。
2007/01/09 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
python使用mysql数据库示例代码
2017/05/21 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
编写strcpy函数
2014/06/24 面试题
外贸实习生自荐信范文
2013/11/24 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
百年校庆节目主持词
2014/03/27 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
办理护照工作证明
2014/10/10 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
团员自我评价范文
2015/03/10 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
孙振耀退休感言
2015/08/01 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP