文档章节

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

萌唬吓删
 萌唬吓删
发布于 2017/08/31 15:40
字数 1062
阅读 1.2W
收藏 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;
	}

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

© 著作权归作者所有

萌唬吓删
粉丝 5
博文 5
码字总数 7716
作品 0
张家口
后端工程师
私信 提问
加载中

评论(0)

前端动态菜单-bootstrap-treeview

一、bootstrap-treeview 官网 Demo bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结...

osc_shz3aep4
2019/03/05
13
0
bootstrap treeview树形菜单 动态扩展 连数据库

二话不说,先来看效果图: 呃呃,虽然不是很美观......不过功能实现就好啦~ 数据库模型是这样的: 我做了什么工作呢? 简单解释一下,就是通过查数据库,把上面的数据查出来,每一行数据封装...

osc_45omoec3
2018/01/25
17
0
bootstrap-treeview中文API 以及后台JSON数据处理

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等等。 插件依...

osc_3xczhhq6
2019/04/22
7
0
bootstrap-treeview + angular 使用

bootstrap-treeview是什么 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。 怎样使用bootstrap-treeview 插件依赖 boostrap-treeview插件依赖于jquery和bootstr...

osc_eviv4ku7
2019/03/13
2
0
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
100
0

没有更多内容

加载失败,请刷新页面

加载更多

如何使用正则表达式验证电子邮件地址? - How to validate an email address using a regular expression?

问题: Over the years I have slowly developed a regular expression that validates MOST email addresses correctly, assuming they don't use an IP address as the server part. 多年来......

技术盛宴
41分钟前
5
0
grep一个文件,但显示几个周围的行? - grep a file, but show several surrounding lines?

问题: I would like to grep for a string, but also show the preceding five lines and the following five lines as well as the matched line. 我想grep一个字符串,但也显示前五行和以......

fyin1314
今天
36
0
运维告警管理—多渠道的通知必达

睿象云智能告警平台CA中通知策略实现了被分派人接收告警的通知方式,确保告警发生/认领/关闭时,能以用户习惯的接收告警的方式,实时收到告警通知,同时,尽可能减少告警遗漏。 如果你想实现...

睿象云
今天
35
0
方法区的回收

方法区中主要回收:1.废弃常量;2.无用的类。 但是判断它们废弃或无用了并不一定会被回收。 1.废弃常量: 对于常量池中的常量a,如果没有任何对象引用该常量的话,就表示它是一个废弃常量。 ...

曦鱼violet
今天
26
0
功能测试(手工测试)转向软件测试工程师的进阶之路

今天在爱码小哥的知乎上看到一个网友提问说,功能测试(手工测试)想要提升自己应该怎么做,有哪些主要职责,正好今天有时间,明天是周六了。我整理了软件测试进阶各方面的资料。初衷于帮助大...

爱码小哥
今天
32
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部