文档章节

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

萌唬吓删
 萌唬吓删
发布于 2017/08/31 15:40
字数 1062
阅读 678
收藏 0
点赞 2
评论 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;
	}

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

© 著作权归作者所有

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

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

zaaack ⋅ 2013/10/29 ⋅ 1

bootstrap-select.min.js ie8 下拉框数据1000条的时候,加载慢

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

lichao_621 ⋅ 2016/09/13 ⋅ 4

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 ⋅ 0

bootstrap treeview怎么刷新表格

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

单蛙 ⋅ 2016/06/17 ⋅ 1

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

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

walb呀 ⋅ 2017/12/04 ⋅ 0

JVM原理机制笔记

1.JVM 简介 JVM 全称是Java Virtual Machine ,Java 虚拟机,也就是在计算机上再虚拟一个计算机。 这和我们使用 VMWare 不一样,那个虚拟的东西你是可以看到的,这个JVM 你是看不到的,它存在...

6pker ⋅ 2015/10/23 ⋅ 0

DevExpress v15.1:DevExtreme控件升级(二)

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

Miss_Hello_World ⋅ 2015/07/15 ⋅ 0

eclipse下java动态编译时com.sun.tools.javac.Main类加载问题的解决

java.lang.NoClassDefFoundError: com/sun/tools/javac/Main 最近在使用java的动态编译的时候出现的问题,主要是由于在使用类com.sun.tool.javac.Main时,总是出现NoClassDefFoundError的错误,...

Jonee_Leo ⋅ 2012/06/16 ⋅ 0

动态载入数据的无刷新TreeView控件(6)

既然是动态的载入数据的TreeView,那么服务器端的数据也同时应该以一种树型结构来保存。通过客户端发送节点标识,返回该节点下的子节点数据从而动态生成子节点。下面是一个模拟文件夹数据存放...

唐玄奘 ⋅ 2017/12/04 ⋅ 0

TreeView 增强组件--TreeViewAdv for .Net

这是一个对 TreeView 进行扩展的组件,主要特点是:模型/视图架构,支持多列数据,支持多个选择,每个节点可以设置不同的控件,包括 CheckBox、Icon、Label、拖拉、高亮等,可根据需要加载数...

匿名 ⋅ 2009/07/28 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java Web如何操作Cookie的添加修改和删除

创建Cookie对象 Cookie cookie = new Cookie("id", "1"); 修改Cookie值 cookie.setValue("2"); 设置Cookie有效期和删除Cookie cookie.setMaxAge(24*60*60); // Cookie有效时间 co......

二营长意大利炮 ⋅ 今天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

Spring JDBC使用方法

普通实现: 1、创建数据表customer。 可以使用任何数据库实现,在项目中要引入相应数据库驱动包并配置相应数据库连接。 2、创建Customer pojo。 Customer类的属性对应数据库的属性,除了为每...

霍淇滨 ⋅ 今天 ⋅ 0

Contos 7 安装Jenkins

Jenkins是一款能提高效率的软件,它能帮你把软件开发过程形成工作流,典型的工作流包括以下几个步骤 开发 提交 编译 测试 发布 有了Jenkins的帮助,在这5步中,除了第1步,后续的4步都是自动...

欧虞山 ⋅ 今天 ⋅ 0

revel

revel install go get github.com/revel/revelgo get github.com/revel/cmd create new app revel new git.oschina.net/zdglf/myapp run app revel run git.oschina.net/zdglf/myapp ot......

zdglf ⋅ 今天 ⋅ 0

49. Group Anagrams - LeetCode

Question 49. Group Anagrams Solution 思路:维护一个map,key是输入数组中的字符串(根据字符排好序) Java实现: public List<List<String>> groupAnagrams(String[] strs) { Map<Strin......

yysue ⋅ 今天 ⋅ 0

spring Email

使用spring发Email其实就是使用spring自己封装携带的一个javamail.JavaMailSenderImpl类而已。这个类可以当一个普通的java对象来使用,也可以通过把它配置变成spring Bean的方式然后注入使用...

BobwithB ⋅ 今天 ⋅ 0

spark 整理的一些知识

Spark 知识点 请描述spark RDD原理与特征? RDD全称是resilient distributed dataset(具有弹性的分布式数据集)。一个RDD仅仅是一个分布式的元素集合。在Spark中,所有工作都表示为创建新的...

tuoleisi77 ⋅ 今天 ⋅ 0

思考

时间一天天过感觉自己有在成长吗?最怕的是时光匆匆而过,自己没有收获!下面总结下最近自己的思考。 认识自己 认识另一个自己,人们常说要虚心听取别人意见和建议。然而人往往是很难做到的,...

hello_hp ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部