bootstrap-treeview后台Json数据的封装及前台的显示

最新推荐文章于 2020-09-12 15:08:08 发布

weixin_30414305

最新推荐文章于 2020-09-12 15:08:08 发布

阅读量654

点赞数

文章标签： json javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/noahpk/p/9407691.html

版权

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后台数据的封装和显示，大家有疑问可以留言。

转载于:https://www.cnblogs.com/noahpk/p/9407691.html

weixin_30414305

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-treeview后台Json数据的封装及前台的显示

1.bootStrap-treeview是我们常用的树形结构，页面风格也比较清新，但是后台数据的封装比较麻烦，经过研究终于解决，和大家分享一下。2.前端代码如下<script>var data =${resTree}; //后台传过来的Json数据 $(function () {$('#tree').treeview({color: ...
复制链接

扫一扫