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 相关文章推荐
js 提交和设置表单的值
Dec 19 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
angular简介和其特点介绍
Jan 29 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
微信小程序实现底部弹出模态框
Nov 18 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 Javascript
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 $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
Python实现发送email的几种常用方法
2014/08/18 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
python实现京东秒杀功能
2018/07/30 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
如何让python的运行速度得到提升
2020/07/08 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
初中教师德育工作总结2015
2015/05/12 职场文书
保姆聘用合同
2015/09/21 职场文书