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. 【原创】ABAP根据文件路径获取文件所在目录

    *&---------------------------------------------------------------------* *& Form frm_get_pat ...

  2. 302Java_前定义

    第零章 前定义 1 介绍 1.1 简介 Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征. ...

  3. jQuery框架 的四个入口函数

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. Django 你需要掌握的模型层（标签、过滤器、模板的继承与导入）

    Django 模型层(标签.过滤器.模板的继承与导入) 好文章来自超哥:https://www.cnblogs.com/guanchao/p/11006062.html   过滤器/自定义过滤器 模板 ...

  5. Spark学习之路（十）—— Spark SQL 外部数据源

    一.简介 1.1 多数据源支持 Spark支持以下六个核心数据源,同时Spark社区还提供了多达上百种数据源的读取方式,能够满足绝大部分使用场景. CSV JSON Parquet ORC JDBC/ ...

  6. Redis 安装和配置（一）

    一. mac下redis的安装 1. 官网http://redis.io/ 下载最新的稳定版本,这里是3.2.0 2. sudo mv 到 /usr/local/ 3. sudo tar -zxf r ...

  7. .NetCore中三种注入方式的思考

    该篇内容由个人博客点击跳转同步更新!转载请注明出处! .NetCore彻底诠释了"万物皆可注入"这句话的含义,在.NetCore中到处可见注入的使用.因此core中也提供了三种注入 ...

  8. node.js的异步I/O、事件驱动、单线程

    nodejs的特点总共有以下几点 异步I/O(非阻塞I/O) 事件驱动 单线程 擅长I/O密集型,不擅长CPU密集型 高并发 下面是一道很经典的面试题,描述了node的整体运行机制,相信很多人都碰到了 ...

  9. 算法详解之最近公共祖先(LCA)

    若图片出锅请转至here 概念 首先是最近公共祖先的概念(什么是最近公共祖先?): 在一棵没有环的树上,每个节点肯定有其父亲节点和祖先节点,而最近公共祖先,就是两个节点在这棵树上深度最大的公共的祖先节 ...

  10. asp.net core 系列之Dependency injection(依赖注入)

    这篇文章主要讲解asp.net core 依赖注入的一些内容. ASP.NET Core支持依赖注入.这是一种在类和其依赖之间实现控制反转的一种技术(IOC). 一．依赖注入概述 1.原始的代码 依赖 ...