layui实现树形下拉列表

核心JS代码，条用后台返回数据以tree显示，10037 10038 10039 对应我上图中的按钮编号。我通过字典表获取。如果没有对应的按钮编号会显示没有执行没有操作的按钮JS

//有操作按钮
var layoutHasOperation = [
    { name: '部门名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: 'width: 60%' },
    {
        name: '操作',
        headerClass: 'value_col',
        colClass: 'value_col',
        render: function(row) {
            return '<privilege:operation operationId="10037" clazz="layui-btn layui-btn-xs"  onClick="updateMenu(' + row.id + ')" name="修改"  iconCls="" layEvent="edit"></privilege:operation><privilege:operation operationId="10036" clazz="layui-btn layui-btn-xs"  onClick="addMenu(' + row.id + ')" name="新增"  iconCls="" layEvent="add"></privilege:operation><privilege:operation operationId="10038" clazz="layui-btn layui-btn-danger layui-btn-xs"  onClick="delMenu(' + row.id + ')" name="删除"  iconCls="" layEvent="del"></privilege:operation>'; //列渲染
        }
    },
];
//没有操作的按钮
var layoutNoOperation = [
    { name: '部门名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: 'width: 95%' },
];

/**
 * 渲染tree-table数据
 */
layui.use(['form', 'tree', 'layer'], function() {
    var layer = layui.layer, tree = layui.tree, form = layui.form;
    //请求menu树数据
    $.ajax({
        type:'POST',
        dataType:'text',
        url: "${pageContext.request.contextPath}/department/getDeparentTreeList",
        data:{"parentId":-1},
        success:function(result){
            var myobj = eval("["+result+"]");
            var thisPageOperationIds=new Array();
            thisPageOperationIds[0]="10037";
            thisPageOperationIds[1]="10036";
            thisPageOperationIds[2]="10038";
            var allOperationIds = '${sessionScope.currentOperationIds}'; 
            var result = judgePageOperationArea(allOperationIds, thisPageOperationIds); 

            if(result){
              layui.treeGird({
                  elem: '#menuTree'
                  ,spreadable:true//设置是否全部展开
                  ,nodes: myobj[0]
                    ,layout: layoutHasOperation
                });
              form.render;
                  }else{
                    layui.treeGird({
                      elem: '#menuTree'
                      ,spreadable:true//设置是否全部展开
                      ,nodes: myobj[0]
                ,layout: layoutNoOperation
                    });
                form.render;
                        }
           }
        });
    });

java代码：

@RequestMapping("getDeparentTreeList")
    public ModelAndView getDeparentTreeList(String parentId){
        ModelAndView mv=new ModelAndView();
        mv.setView(Jackson2Util.jsonView());
        try {
            JSONArray jsonArray = getListByParentId(parentId);
            mv.addObject(jsonArray);
        } catch (Exception e) {
            e.printStackTrace();
            logger.error("菜单展示错误",e);
        }
        
        return mv;
    }
    
    private JSONArray getListByParentId(String parentId)throws Exception{
        JSONArray jsonArray=this.getDeparentList(parentId);
        for(int i=0;i<jsonArray.size();i++){
            JSONObject jsonObject=jsonArray.getJSONObject(i);
            if("open".equals(jsonObject.getString("state"))){
                continue;                                                 
            }else{
                jsonObject.put("children", getListByParentId(jsonObject.getString("id")));
            }
        }
        return jsonArray;
    }
    
    private JSONArray getDeparentList(String parentId)throws Exception {
        JSONArray jsonArray=new JSONArray();
        department = new Department();
        department.setParentid(Long.parseLong(parentId));
        List<Department> list = departmentService.selectAllParentList(department);
        for(Department department : list){
            JSONObject jsonObject = new JSONObject();
            Long departmentId = department.getId();
            jsonObject.put("id", departmentId);
            jsonObject.put("name", department.getName());
            jsonObject.put("spread", true);
            // 加上该页面菜单下面的按钮
            operation = new Operation();
            operation.setMenuId(departmentId);
            List<Operation> operaList = operationService.findOperation(operation);
            if (operaList!=null && operaList.size()>0) {
                String string = "";
                for (Operation o : operaList) {
                    string += o.getOperationName() + ",";
                }
                jsonObject.put("operationNames", string.substring(0,string.length()-1));
            } else {
                jsonObject.put("operationNames", "");
            }
            jsonArray.add(jsonObject);
        }
        return jsonArray;
    }

首先我先向数据库脚本SQL中存入了一个固定栏就是第一张图的部门信息如下图：

然后不断地通过parentId这个字段进行循环遍历获取关联数据。