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 EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
Jquery之美中不足小结
Feb 16 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
理解Javascript图片预加载
Feb 23 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
原生JS轮播图插件
Feb 09 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
webpack的tree shaking的实现方法
Sep 18 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实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
python显示天气预报
2014/03/02 Python
Python生成随机MAC地址
2015/03/10 Python
Python文件去除注释的方法
2015/05/25 Python
Python常用的爬虫技巧总结
2016/03/28 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
浅谈Python 函数式编程
2020/06/20 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
营业员实习自我鉴定
2013/12/07 职场文书
生产总经理岗位职责
2013/12/19 职场文书
商场中秋节广播稿
2014/01/17 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python