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模拟滚动条(横向竖向)
Feb 22 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
Vue通过input筛选数据
Oct 26 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 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脚本数据库功能详解(中)
2006/10/09 PHP
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
python 正则式 概述及常用字符
2009/05/07 Python
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
实例讲解python中的协程
2018/10/08 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
详解python破解zip文件密码的方法
2020/01/13 Python
python实现在一个画布上画多个子图
2020/01/19 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
python爬虫实现获取下一页代码
2020/03/13 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
python用700行代码实现http客户端
2021/01/14 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
美国性感内衣店:Yandy
2018/06/12 全球购物
计算机毕业大学生推荐信
2013/12/01 职场文书
八项规定整改方案
2014/10/01 职场文书
个人政治思想总结
2015/03/05 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python