bootstrap-treeview

后台数据返回 :

@RequestMapping("/findAll")
    @ResponseBody
    public List<Map<String, Object>> findAll(HttpServletRequest request) {
        List<Auth> list = authDao.findAll();
        List<Map<String, Object>> authList = new ArrayList<Map<String, Object>>();
        List<AuthGroup> authGroupList = authGroupDao.findAll();
        
        for (AuthGroup authGroup : authGroupList) {
            Map<String, Object> one = new HashMap<String, Object>();
            one.put("text", authGroup.getName());
            one.put("value", authGroup.getId());
            List<Map<String, Object>> auths = new ArrayList<Map<String, Object>>();            
            for(Auth auth:authGroup.getAuths()) {
                Map<String, Object> nodes = new HashMap<String, Object>();
                nodes.put("text", auth.getName());
                nodes.put("value", auth.getId());
                auths.add(nodes);
            }            
            one.put("nodes",auths);
            authList.add(one);        
        }
        System.out.println(authList);            
        return authList;
    }
}

前台接受 :

$(function() {
            $.ajax({
                type: "GET",
                url: "/auth/findAll",
                async: false,
                success: function(data){
                    $('#treeview1').treeview({
                         backColor: "#FFFFFF",
                         enableLinks: false,
                         data: data
                    }); 
                    $("#treeview1").treeview('collapseAll');
                        var firstNode = $("#tree").treeview('findNodes',[result.list[0].id,'id']);
                        $("#treeview1").treeview('expandNode',firstNode);
                    $("#treeview1").treeview("selectNode", firstNode);
                },
                error: function(){
                    alert("error");
                }
            });     
 });

 

参考 :https://jingyan.baidu.com/article/0aa2237541e2f088cc0d6406.html

 

返回数据json格式 :

[
  {
    "id": 1,
    "pid": 0,
    "name": "系统管理",
    "sort": "管理"
  },
  {
    "id": 2,
    "pid": 0,
    "name": "字典管理",
    "sort": "字典"
  },
  {
    "id": 20,
    "pid": 1,
    "name": "新增系统",
    "sort": "新增"
  },
  {
    "id": 21,
    "pid": 1,
    "name": "编辑系统",
    "sort": "编辑"
  },
  {
    "id": 22,
    "pid": 1,
    "name": "删除系统",
    "sort": "删除"
  },
  {
    "id": 33,
    "pid": 2,
    "name": "系统环境",
    "sort": "环境"
  },
  {
    "id": 333,
    "pid": 33,
    "name": "新增环境",
    "sort": "新增"
  },
  {
    "id": 3333,
    "pid": 33,
    "name": "编辑环境",
    "sort": "编辑"
  },
  {
    "id": 233332,
    "pid": 33,
    "name": "删除环境",
    "sort": "删除"
  }
]

pid为父元素

id为子元素

bootstrap-treeview.js中会写好方法

直接引用就好

上一篇:c# TreeView实现三种选中状态


下一篇:TreeView拖动并存入数据库(可判断拖动)