文档章节

Bootstrap treeview实现动态加载数据(带搜索)

萌唬吓删
 萌唬吓删
发布于 2017/08/31 15:40
字数 1062
阅读 1137
收藏 0

写在前面:

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

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

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

好了,话不多说,开整。

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

最终效果展示: 输入图片说明

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

二、前台页面

  1. 页面引入
    <link rel="stylesheet" href="项目静态资源路径/bootstrap-treeview/css/bootstrap.css">
    <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>
  1. 页面展示区
    <!-- 省市区地域查询展示 -->
    <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>
  1. 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;
	}

写在后面:因水平有限,欢迎交流指正,共同进步! 欢迎任何形式的转载,但请务必注明出处。

© 著作权归作者所有

共有 人打赏支持
萌唬吓删
粉丝 3
博文 4
码字总数 4421
作品 0
张家口
后端工程师
给高效的jquery.treeview加上选择框--jquer.treeview.addon

最近闲来无事(其实是没事找事),做一个项目时月底催着演示,需要用到树级菜单,一直比较喜欢jquery.treeview(其实是暂时只知道并且只会用jquery.treeview),可惜不支持checkbox。虽然在开源...

zaaack
2013/10/29
4.4K
1
html页面显示乱码原因

最近用bootstrap树形插件 html <div class="col-md-3"> <div id="treeview4" class=""></div> </div> 引用的js <script src="../../dist/js/bootstrap-treeview.js"></script> <script src=......

tianyawhl
2016/03/03
71
0
bootstrap-select.min.js ie8 下拉框数据1000条的时候,加载慢

ie8浏览器,加载带搜索功能的下拉框,下拉框数据1000条以上的时候,加载特别慢,几乎1分钟以后,影响页面运行效果,有没有解决办法,我需要带搜索功能的下拉框,bootstrap风格的,求支招...

lichao_621
2016/09/13
676
4
bootstrap treeview怎么刷新表格

我使用bootstrap treeview进行了配置文件管理的工作 比如我用ajax在后台添加了一条数据,想把树刷新下立即显示出新添加的数据。 请问: bootstrap treeview 怎么刷新整个树结构?...

单蛙
2016/06/17
2.2K
1
基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非...

walb呀
2017/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python标准输入输出

input() 读取键盘输入 input() 函数从标准输入读入一行文本,默认的标准输入是键盘。 input 可以接收一个Python表达式作为输入,并将运算结果返回。 print()和format()输出 format()输出...

colinux
24分钟前
0
0
Python 核心编程 (全)

浅拷贝和深拷贝 1.浅拷贝:是对于一个对象的顶层拷贝,通俗的理解是:拷贝了引用,并没有拷贝内容。相当于把变量里面指向的一个地址给了另一个变量就是浅拷贝,而没有创建一个新的对象,如a...

代码打碟手
36分钟前
0
0
PHP 对象比数组省内存?错!数组比对象省内存?错!

刚刚一个群里有人引出了 PHP 数组和对象占用内存谁多谁少的问题。我想起之前我好像也测试过这个问题,和群里人说的对象比数组节省内存的结论相反,我得出的是数组比对象节省内存。 但今天,我...

宇润
52分钟前
1
0
memcached命令行及其用法

21.5 memcached命令行 创建数据 yum install -y telnet 利用telnet命令连接memcached数据库 telnet 127.0.0.1 11211 #写入数据 set key2 0 30 212STORED 这个是错误的示范,因为0 30 已经...

lyy549745
52分钟前
0
0
Maven私服

Maven私服 一、简介 当多人项目开发的时候,尤其聚合项目开发,项目和项目之间需要有依赖关系,通过maven私服,可以保存互相依赖的jar包,这样的话就可把多个项目整合到一起。 如下图: Inst...

星汉
56分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部