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