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. Codility--- Distinct

    Task description Write a function class Solution { public int solution(int[] A); } that, given a zer ...

  2. spark streaming 接收kafka消息之一 -- 两种接收方式

    源码分析的spark版本是1.6. 首先,先看一下 org.apache.spark.streaming.dstream.InputDStream 的 类说明: This is the abstrac ...

  3. 高并发 Nginx+Lua OpenResty系列（4）——Lua 模块开发

    在实际开发中,不可能把所有代码写到一个大而全的lua文件中,需要进行分模块开发:而且模块化是高性能Lua应用的关键.使用require第一次导入模块后,所有Nginx 进程全局共享模块的数据和代码,每 ...

  4. Django 强大的ORM之增删改查

    Django orm         Django——orm进阶 测试Django中的orm 表结构: models.py class User(models.Model): name = model ...

  5. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  6. memcached分布式一致性哈希算法

    <span style="font-family: FangSong_GB2312; background-color: rgb(255, 255, 255);">如果 ...

  7. 【前端优化】js图片懒加载及优化

    一.前言 为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB.当页面图片过多的时候,页面加载速 ...

  8. 从无到有构建vue实战项目（二）

    二.vue项目的初步搭建 该项目我采用了当下最流行的vue ui框架---element-ui,首先用vue-cli构建一个vue项目: vue create education 然后会出现一系列配置 ...

  9. 嵌入式物联网32 ARM linux 等创客学院学习视频共享给大家

    大家手机号登录学习链接即可观看   有坛友说手机号登录不上  具体自测  http://www.makeru.com.cn/live/1392_303.html?s=60220走进嵌入式http:// ...

  10. Codeforces 758B：Blown Garland（模拟）

    http://codeforces.com/problemset/problem/758/B 题意:给出一个字符串,每4个位置对应一个颜色,如果为‘!’的话,代表该灯泡是坏的,问最后每个颜色坏的灯泡的 ...