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. DataVeryLite和Nhibernate性能对比

    电脑型号:acer 4752g 电脑配置: 代码分享: class Program { static void Main(string[] args) { Debug.Listeners.Add(ne ...

  2. Codility---PermCheck

    Task description A non-empty zero-indexed array A consisting of N integers is given. A permutation i ...

  3. SPOJ130_Rent your airplane and make money_单调队列DP实现

    题意比较简单,状态转移方程也比较容易得出: f[i]=max{ f [ j ] }+p[i],(j的结束时间在i开始时间之前) 若i开始之前没有结束的j,则f[i]=p[i]; 因数据量太大(n< ...

  4. webpack 编译ES6

    虽然js的es6是大势之趋,但很多浏览器还没有完全支持ES6语法,webpack可以进行对es6打包编译 需要安装的包有 npm init // 初始化 npm install babel-loade ...

  5. spring boot 2.x 系列——spring-boot 集成 Swagger2 打造在线接口文档

    文章目录 一.Springfox 与 Swagger 简介 1.1 Springfox 1.2 Swagger 1.3 OpenApi.Swagger.Springfox的关系 二.spring bo ...

  6. excel for mac打开csv文件不分列

    参考链接:http://www.1207.me/archives/247.html excel for mac在打开csv文件(逗号分隔的文本文件)的时候,不能像windows那样分列,而且全都挤在一 ...

  7. SqlServer执行计划

    MSSQLSERVER执行计划详解 * from ServiceInvoke; --创建时间聚集索引扫描 * from AdoLog; --主键ID聚集索引扫描 --2.根据聚集索引排序-性能提升 - ...

  8. Delphi7中Unicode,ANSI,UTF编码问题

    注解: ANSI     'American Standard Code for Information Interchange' 美国信息互换标准代码 ANSI的'Ascii'编码 Unicode ...

  9. 多线程总结-同步之volatile关键字

    目录 1 案例引出可见性 2 案例引出原子性 1 案例引出可见性 代码解析:新起一个子线程执行m()方法,1秒后主线程将b置为false,子线程是否会停止执行死循环while(b){},打印" ...

  10. C++ 编程技巧锦集（一）

    C++刷题精髓在STL编程,还有一些函数.下面我就总结一下本人在刷题过程中,每逢遇见总要百度的内容………………(大概率因为本人刷题太少了) 1. map map<string, int> ...