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. Angular4初学

    [1].在学习Angular4之前,首先要了解一些typescript的知识. 以下是我的总结:https://gitee.com/FangXiaoQi123/angularJSCeShi/blob/ ...

  2. kubernetes使用http rest api访问集群之使用postman工具访问 apiserver

    系列目录 前面一节我们介绍了使用curl命令行工具访问apiserver,命令行工具快速高效,但是对于输出非常长的内容查看不是特别方便,尤其终端界面输入的东西非常多的时候,过长的内容不是特别容易通过滚 ...

  3. sqlserver/mysql按天，按小时，按分钟统计连续时间段数据

    文 | 子龙 有技术,有干货,有故事的斜杠青年 一,写在前面的话 最近公司需要按天,按小时查看数据,可以直观的看到时间段的数据峰值.接到需求,就开始疯狂百度搜索,但是搜索到的资料有很多都不清楚,需要自 ...

  4. centos安装最新版MySQL 8.0教程

    这篇教程是通过yum方式安装的 安装依赖 yum install libaio wget -y 检查MYSQL是否已安装 yum list installed | grep mysql 如果有先卸载 ...

  5. 微信小程序商城（Java版）

    体验 后台演示地址(账号:admin 密码:admin) 小程序体验如下: 技术选型 1 后端使用技术 1.1 springframework4.3.7.RELEASE 1.2 mybatis3.1. ...

  6. Programming In Lua 第九章

    1, 2, 3, 4, 5, 6, 第6点很关键:先是调用消费者,来唤醒一个协同例程producer,协同例程producer读取一个数据x后调用send.send函数中调用yield(x),该函数将 ...

  7. WebGL 着色器偏导数dFdx和dFdy介绍

    本文适合对webgl.计算机图形学.前端可视化感兴趣的读者. 偏导数函数(HLSL中的ddx和ddy,GLSL中的dFdx和dFdy)是片元着色器中的一个用于计算任何变量基于屏幕空间坐标的变化率的指令 ...

  8. SpringMVC框架的简单理解

    首先,让我们来看下下图 SpringMVC解决了View和Controller的交互问题 其中有几个重要组成部分: (1) DispatcherServlet: 前端控制器 用于接收所有请求,并负责分 ...

  9. Hackbar再次更新后的破解思路 v2.2.6

    不得不说在日常测试和渗透测试中hackbar这一插件给我带来了很大的便利 Hackbar在2.1.3之后的版本就开始收费了虽说价格不是很贵,但我们还是本着学习研究的心态来看看怎么绕过收费验证. 谷歌: ...

  10. scrapy基础知识之 使用FormRequest.from_response()方法模拟用户登录：

    通常网站通过 实现对某些表单字段(如数据或是登录界面中的认证令牌等)的预填充 使用Scrapy抓取网页时,如果想要预填充或重写像用户名.用户密码这些表单字段, 可以使用 FormRequest.fro ...