文档章节

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

萌唬吓删
 萌唬吓删
发布于 2017/08/31 15:40
字数 1062
阅读 1375
收藏 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 treeview怎么刷新表格

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

单蛙
2016/06/17
2.2K
1
bootstrap-select.min.js ie8 下拉框数据1000条的时候,加载慢

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

lichao_621
2016/09/13
676
4
DevExpress v15.1:DevExtreme控件升级(二)

HTML 5/JS控件增强 1.1 无障碍 DevExtreme HTML5/JS控件现在包含WAI-ARIA标记并支持屏幕阅读器。 1.2 字体图标 我们已经改进了图标库并支持将图标作为一种字体,这使您能够瞬间定制图标。此外...

Miss_Hello_World
2015/07/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

solr使用规范

0. 目的 规范solr设计、用法,避免bug,提高性能 1. 设计规范 solr的用途是查询,不是存储,建议查询结果尽量都为id主键,而后再拿该id主键到缓存或者db中再查询相关信息,例如:请勿将经销商...

andersChow
7分钟前
0
0
11-《深度拆解JVM》之Java对象的内存布局

一、问题引入 在 Java 程序中,我们拥有多种新建对象的方式。除了最为常见的 new 语句之外,我们还可以通过反射机制、Object.clone 方法、反序列化以及 Unsafe.allocateInstance 方法来新建对...

飞鱼说编程
11分钟前
0
0
Windows Install Docker

win7、win8 win7、win8 等需要利用 docker toolbox 来安装,国内可以使用阿里云的镜像来下载,下载地址:http://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/ docker toolbox...

linuxprobe16
16分钟前
0
0
混合云环境中扩展Kubernetes的挑战及方案

流量突增时,我们需要扩展应用程序以满足用户需求。本文分享了扩展Kubernetes以及管理混合云环境时可能遇到的挑战,以及如何简单高效地完成Kubernetes扩展。 引 言 假设您的业务是在线的:您...

RancherLabs
24分钟前
0
0
Java集合小抄

Java集合小抄 1. List 1.1 ArrayList 以数组实现。节约空间,但是数组有容量限制。超出限制时会增加50%容量,用System.arraycopy()复制到新的数组。因此最好能给出数组大小的预估值。默认第一...

傅小水water
32分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部