zoukankan      html  css  js  c++  java
  • 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后台数据的封装和显示,大家有疑问可以留言。

  • 相关阅读:
    day25:接口类和抽象类
    vue1
    How the weather influences your mood?
    机器学习实验方法与原理
    How human activities damage the environment
    Slow food
    Brief Introduction to Esports
    Massive open online course (MOOC)
    Online learning in higher education
    Tensorflow Dataset API
  • 原文地址:https://www.cnblogs.com/noahpk/p/9407691.html
Copyright © 2011-2022 走看看