从零搭建项目开发框架-16资源管理界面设计与开发

这里定义资源，是包括页面链接和页面上的各个功能按钮，因为web系统都是以http请求作为资源的。所以SysResource里面有一个资源类型字段，1模块，2操作。这样就可以全部控制系统的所有请求。

资源管理界面不同于用户管理界面，是一个树状形式展示的列表，如下图所示：

资源管理图.png

1、TreeTable

引用对应的js和css

引用对应的js和css.png

生成treetable列表的java代码

  /**
     * 模块列表，递归生成，用于显示treeGrid
     *
     * @return
     */
    public List<SysResource> list() {
        List<SysResource> list = sysResourceDao.listByType(1);//获取所有模块
        List<SysResource> listRet = new ArrayList<>();
        listRet = createModuleList(list, listRet, 1);
        return listRet;
    }

    private List<SysResource> createModuleList(List<SysResource> list, List<SysResource> listRet, int parentId) {
        for (SysResource sysModule : list) {
            if (sysModule.getParentId() == parentId) {
                listRet.add(sysModule);
                if (sysModule.getCnt() > 0) {
                    listRet = createModuleList(list, listRet, sysModule.getId());
                }
            }
        }
        return listRet;
    }

这一块要用到递归，逐层列出来，比较简单。

页面部分生成treeTable

$("#treeTable").treeTable({
                expandLevel : 3
            });

页面加载完直接调用上述方法即可。

2、新增或修改界面，选择模块的上级节点

在新增和修改模块界面，需要选择上级节点，这里就点击选择按钮，弹出对话框，对话框里是模块树，选择对应的节点即可，如下图所示：

选择模块的上级节点.png

引用对应的js和css

选择Ztree.png

这里用的是Ztree，并加入了BootStrap的样式。

Ztree初始化的js代码

 var zTree;
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                }
            }
        };
        var zNodes = [${ztree}];
        jQuery(document).ready(function () {
            var t = $("#tree");
            t = $.fn.zTree.init(t, setting, zNodes);
            var zTree = $.fn.zTree.getZTreeObj("tree");
        });

        function getSelected() {
            var treeObj = $.fn.zTree.getZTreeObj("tree");
            var nodes = treeObj.getSelectedNodes();
            if (nodes.length > 0) {
                $("#parentId").val(nodes[0].id);
                $("#parentName").val(nodes[0].name);
                $('#basic').modal('hide');
            }
            else return;
        }

这里面并不复杂，需要从controller里面获取Ztree对应数据${ztree}

生成Ztree数据的java代码

 /**
     * 生成Ztree的树节点,新增模块时使用，只有模块上下级
     *
     * @return
     */
    public String createZtreeByModule() {
        List<SysResource> listModule = sysResourceDao.listByType(1);// 模块列表
        StringBuilder sb = new StringBuilder();
        for (SysResource sysModule : listModule) {
            if (sysModule.getParentId() != 0) {
                sb.append("{id : \"" + sysModule.getId() + "\",pId :\"" + sysModule.getParentId() + "\",name :\"" + sysModule.getName() + "\",open : false");
                sb.append("},");
            }
        }
        return StringUtil.subTract(sb.toString());
    }

源码下载

本阶段详细源码