1.bootStrap-treeview是我们常用的树形结构，页面风格也比较清新，但是后台数据的封装比较麻烦，经过研究终于解决，和大家分享一下。

2.前端代码如下

<script>

var data =${resTree};      //后台传过来的Json数据

 $(function () {

$('#tree').treeview({

color: "#428bca",

data:data, //Treeview的数据源 返回json

levels: 4,

onNodeSelected: function (e, m) { //Treeview 被选中事件，可以添加响应事件

var id=m.id;

var remark=m.text;

},

onNodeUnselected: function (e, m) { //Treeview 取消选中事件

}

})

});

</script>

<html>

<body>

<div id="tree" class="col-md-6 col-lg-3" style="overflow:auto;display:block;height:700px"></div>

</body>

</html>

　3.后台Json数据封装

我们的数据库表设计如下图

pid是父节点，继承自菜单的Id

public List<Navi> nextLevel(int id) {

		return navidao.nextLevel(id);             //通过菜单id查处它的子菜单节点

	}

	public List<Map<String,Object>> getTree(List<Navi> nlist) {            //传入的参数是查询出来的所有节点数据

		String name;

		List<Map<String,Object>> listmap= new ArrayList<Map<String,Object>>();

		List<Navi> list_xjj = new ArrayList<Navi>();

		for(Navi navi : nlist)

		{

			list_xjj=nextLevel(navi.getId());

			Map<String, Object> xmap= new HashMap<String, Object>();

			name="\""+navi.getName()+"\"";

			String id="\""+navi.getId()+"\"";

			xmap.put("text",name);

			xmap.put("id", id);

			if(list_xjj.size()>0) {

				xmap.put("nodes", getTree(list_xjj));

			}

			listmap.add(xmap);

		}

		return listmap;

	}
//将查询出来的结果封装成json传给前台页面
@RequestMapping("/ListNavi")

public ModelAndView list(HttpServletRequest request,HttpServletResponse response) throws Exception {

ModelAndView mav = new ModelAndView();

List<Navi> naviList = new ArrayList<Navi>();

int id=0;

naviList = naviService.nextLevel(id);　　//查出根节点下面所有的菜单选项

List<Map<String, Object>> result = naviService.getTree(naviList);       //对数据进行封装嵌套

String results = result.toString().replace("=",":");

JSONObject res = new JSONObject();

JSONArray jsonArray = JSONArray.fromObject(results);	　　　　　　　　//封装成json结构，传给前台页面

mav.addObject("resTree", jsonArray);

mav.setViewName("page/navi/ListNavi");

return mav;

}

　　

　　通过这种方法，完美的实习了bootstrap-treeview后台数据的封装和显示，大家有疑问可以留言。

bootstrap-treeview后台Json数据的封装及前台的显示的更多相关文章

  1. 结合Bootbox将后台JSON数据填充Form表单

    本文介绍了如何结合Bootbox将后台JSON数据填充到Form表单中,同时也介绍了一些需要使用的知识的学习途径,并附上了参考文档地址与学习网址,对此感兴趣的伙伴可以直接访问学习.为了方便介绍,使用了 ...

  2. 解决后台json数据返回的字段需要替换的问题

    有时候后台json数据返回的字段含有“id”,也有可能是有时候为了减少代码的冗余,两页面之间只是数据模型个别属性的区别,所以这时候最好是用到模型属性的替换,用新的属性替换返回的json数据的字段.这里 ...

  3. 用ajax获取后台数据，返回json数据，怎么在前台使用？

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  4. bootstrap selectpicker 通过代码指定选中值 BootStrap selectpicker后台动态绑定数据 selectpicker 获取选中option的属性或者值

    bootstrap-select使用 bootstrap selectpicker 通过代码指定选中值 $('#subjectno').selectpicker('val',(row.subjectn ...

  5. 原生js，jquery通过ajax获得后台json数据动态新增页面元素

    一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...

  6. easyui-combobox url绑定后台json数据问题

    <input id="line" name="line" style="max-width:120px;" class="e ...

  7. 使用ajax解析后台json数据时：Unexpected token o in JSON at position 1

    json数据解析异常 今天在做json数据的时候,出现了如下错误,说是解析异常. VM1584:1 Uncaught SyntaxError: Unexpected token o in JSON a ...

  8. ES6_Demo，模拟后台json数据展示

    最近在学习ES6,下面,模拟后台传过来json数据,并在页面展示的一个小Demo. 页面简单的不可描述,只有一个button按钮 <button>点击获取json数据</button ...

  9. 8.ajax与django后台json数据的交互

    1新建django项目名为json_ajax,应用名为app,在templates模板中新建ajax.html文件 ajax.html <!DOCTYPE html> <html l ...

随机推荐

  1. SYN2306C型 GPS北斗授时导航接收机

    SYN2306C型 GPS北斗授时导航接收机 北斗对时系统北斗标准同步时钟北斗卫星校时器使用说明视频链接: http://www.syn029.com/h-pd-222-0_310_36_-1.htm ...

  2. Python 爬虫从入门到进阶之路（六）

    在之前的文章中我们介绍了一下 opener 应用中的 ProxyHandler 处理器(代理设置),本篇文章我们再来看一下 opener 中的 Cookie 的使用. Cookie 是指某些网站服务器 ...

  3. Python自学day-4

    一.字符串转为字典(eval):也可以用于转列表.集合等 s1 = "['name','leo']" s_list = eval(s1) #字符串转换为列表 print(s_lis ...

  4. Hive 学习之路（三）—— Hive CLI和Beeline命令行的基本使用

    一.Hive CLI 1.1 Help 使用hive -H或者 hive --help命令可以查看所有命令的帮助,显示如下: usage: hive -d,--define <key=value ...

  5. C#版剑指Offer-001二维数组中的查找

    题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...

  6. css之vw布局

    vw,vh是视口单位,是相对视口单位,与百分百布局不一样的是,百分百是相对于父及元素,而vw布局是相对与窗口. 而rem布局是要与js一起配合 // 以iphone6设计稿 @function px2 ...

  7. ubuntu镜像快速下载

    由于官网服务器在国外,下载速度奇慢,所以我们可以利用阿里云镜像下载ubuntu ubuntu 14.04: http://mirrors.aliyun.com/ubuntu-releases/14.0 ...

  8. Python笔记【5】_字符串&列表&元组&字典之间转换学习

    #!/usr/bin/env/python #-*-coding:utf-8-*- #Author:LingChongShi #查看源码Ctrl+左键 #数据类型之间的转换 Str='www.baid ...

  9. filebeat直连elasticsearch利用pipeline提取message中的字段

    这里使用filebeat直连elasticsearch的形式完成数据传输,由于没有logstash,所有对于原始数据的过滤略显尴尬(logstash的filter非常强大). 但是由于业务需求,还是需 ...

  10. MySQL5.7高版本 疑似内存泄露

    I have an instance running on mysql-5.7.19. However, I found that its physical memory and virtual me ...