organize

organize

关注
发信
关注(28)粉丝(399)

基于easyUI实现权限管理系统（一）一—组织结构树图形

此文章是基于　　EasyUI+Knockout实现经典表单的查看、编辑

一. 相关文件介绍

　　1. organize.jsp：组织结构树的主界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>

 <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>组织结构树</title>

    <%@ include file="/common/head.jsp"%>

 </head>

 <body>

    <div class="toolbar">

        <a href="#" plain="true" class="easyui-linkbutton" icon="icon-arrow_refresh" title="刷新" data-bind="click:refreshClick">刷新</a>

        <a href="#" plain="true" class="easyui-linkbutton" icon="icon-add"              title="新增" data-bind="click:addClick">新增</a>

        <a href="#" plain="true" class="easyui-linkbutton" icon="icon-edit"          title="编辑" data-bind="click:editClick" >编辑</a>

        <a href="#" plain="true" class="easyui-linkbutton" icon="icon-cross"          title="删除" data-bind="click:deleteClick">删除</a>

        <a href="#" plain="true" class="easyui-linkbutton" icon="icon-group" title="设置角色" data-bind="click:roleClick">设置角色</a>

    </div>

    <div id="gridlist" class="wrapper" style="width: 100%; height: 100%; margin-top:15px;"></div>

    <script type="text/html" id="edit-template">

        <div class="container_16" style="width:90%;margin:5%;">

            <div class="grid_3 lbl" >上级机构</div>

            <div class="grid_13 val" ><input class="txtBox" data-bind="easyuiCombotree:combotree,combotreeValue:form.parentId" /></div>

            <div class="grid_3 lbl">机构名称</div>

            <div class="grid_13 val"><input class="txtBox easyui-validatebox" style="width:220px;" data-bind="value:form.organizeName" data-options="required:true,validateOnCreate:false,validateOnBlur:true" /></div>

            <div class="grid_3 lbl">备注</div>

            <div class="grid_13 val"><textarea class="txtBox" style="width:220px;height:50px;" data-bind="value:form.description"  ></textarea></div>

            <div class="clear"></div>

        </div>

        <div style="text-align:center;">

            <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)"  >确定</a>

            <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a>

        </div>

    </script>

    <script type="text/html" id="setrole-template">

        <style type="text/css">

            .listview{ margin:0 !important;}

            .listview li{width:100px !important;background-color:skyblue !important;float:left;margin:3px;}

        </style>

        <div style="margin:5px;height:370px;overflow:auto;"  >

            <div style="border-bottom:1px solid #CCC; margin-bottom:5px;">

                <span class="icon32 icon-org32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;" data-bind="text:organizeName">机构名称</span>

            </div>

            <div> 拥有角色(请点击勾选)：</div>

            <div class="metrouicss">

                <ul class="listview"></ul>

            </div>

        </div>

        <div style="text-align:center;">

            <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)"  >确定</a>

            <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a>

        </div>

    </script>

    <%@ include file="/common/foot.jsp"%>

    <script type="text/javascript" src="viewModel/sys/organize.js"></script>

    <script type="text/javascript" src="viewModel/sys/organizeTreeGraph.js"></script>

    <script type="text/javascript">

        var data = ${data};

        ko.bindingViewModel(new viewModel());

        using(['dialog','combotree','messager'])

    </script>

 </body>

</html>

　　2. organize.js：实现界面按钮的功能

function viewModel() {

    var self = this;

    this.refreshClick = function () {

        window.location.reload();

    };

    this.save = function (vm,win) {

        var post = { form: ko.toJS(vm.form) };

        com.ajax({

            type: 'POST',

            url: rootPath+'/sys/organize!edit.do',

            data: JSON.stringify(post),

            success: function (d) {

                com.message('success', '保存成功！');

                win.dialog('close');

                window.location.reload();

            }

        });

    }

    this.addClick = function () {

        var defaults = { parentId: (self.selectNode || {}).id || 0 };

        self.openDiloag("添加新机构", defaults, function (vm, win) {

            if (com.formValidate(win)) {

                vm.form._id = vm.form.id();

                self.save(vm,win);

            }

        });

    };

    this.editClick = function () {

        if (!self.selectNode) return com.message('warning', '请先选择一个机构！');

        self.openDiloag("编辑机构-"+self.selectNode.organizeName,self.selectNode, function (vm, win) {

            if (com.formValidate(win)) {

                self.save(vm,win);

            }

        });

    };

    this.deleteClick = function () {

        if (!self.selectNode) return com.message('warning', '请先选择一个机构！');

        if (utils.isNotEmpty(self.selectNode.children)) return com.message('warning', '请先删除子机构！');

        com.message('confirm', '确认要删除选中的机构吗？', function (b) {

            if (b) {

                com.ajax({

                    type: 'DELETE',

                    url: rootPath+'/sys/organize!delete.do?id=' + self.selectNode.id,

                    success: function (d) {

                        com.message('success', '删除成功！');

                        window.location.reload();

                    }

                });

            }

        });

    };

    this.roleClick = function () {

        if (!self.selectNode)

            return com.message('warning', '请先选择一个机构！');

        com.dialog({

            title: "设置角色",

            width: 600,

            height: 450,

            html: "#setrole-template",

            viewModel: function (w) {

                var thisRole = this;

                this.organizeName = ko.observable(self.selectNode.organizeName);

                com.loadCss(rootPath+'/content/css/metro/css/modern.css', parent.document);

                com.ajax({

                    type: 'GET',

                    url: rootPath+'/sys/role!getRoleWithOrganizeCheck.do?organizeId=' + self.selectNode.id,

                    success: function (d) {

                        var ul = w.find(".listview");

                        for (var i in d)

                            ul.append(utils.formatString('<li role="{0}" class="{2}">{1}</li>', d[i].id, d[i].roleName, d[i].checked == 'true' ? 'selected' : ''));

                        ul.find("li").click(function () {

                            if ($(this).hasClass('selected'))

                                $(this).removeClass('selected');

                            else

                                $(this).addClass('selected');

                        });

                    }

                });

                this.confirmClick = function () {

                    var roles = [];

                    w.find("li.selected").each(function () {

                        roles.push({ id: $(this).attr('role') });

                    });

                    com.ajax({

                        url: rootPath+'/sys/role!editOrganizeRoles.do?organizeId=' + self.selectNode.id,

                        data: ko.toJSON(roles),

                        success: function (d) {

                            thisRole.cancelClick();

                            com.message('success', '保存成功！');

                        }

                    });

                };

                this.cancelClick = function () {

                    w.dialog('close');

                };

            }

        });

    };

    this.openDiloag = function (title,node,fnConfirm) {

        com.dialog({

            title: title,

            height: 250,

            width: 400,

            html: "#edit-template",

            viewModel: function (w) {

                var that = this;

                this.combotree = {

                    width:228,

                    data: self.combotreeData,

                    onBeforeSelect: function (node) {

                        var isChild = utils.isInChild(self.combotreeData, that.form._id, node.id);

                        com.messageif(isChild, 'error', '不能将自己或下级设为上级机构');

                        return !isChild;

                    }

                },

                this.form = {

                    _id:node.id,

                    parentId: ko.observable(node.parentId),

                    id: ko.observable(node.id),

                    organizeName: ko.observable(node.organizeName),

                    description: ko.observable(node.description)

                };

                this.confirmClick = function () {

                    fnConfirm(this,w);

                };

                this.cancelClick = function () {

                    w.dialog('close');

                };

            }

        });

    };

    this.initTreeData = function () {

        var list = utils.filterProperties(data, ['id as id', 'parentId as pid', 'organizeName as text']);

        var treeData = utils.toTreeData(list, "id", "pid", "children");

        treeData.unshift({ "id": 0, "text": "==请选择==" });

        self.combotreeData = treeData;

    };

    this.initGraph = function (data) {

        self.data = data;

        var wrapper = $("div.wrapper").empty();

        var treeData = utils.toTreeData(data, "id", "parentId", "children");

        var tb = renderTreeGraph(treeData);

        tb.appendTo(wrapper);

        //绑定事件

        $(wrapper).find(".td-node").click(function () {

            $(".td-node").css({ "background-color": "#f6f6ff", "color": "" });

            $(this).css({ "background-color": "#faffbe", "color": "#FF0000" });

            self.selectNode = $(this).data("node");

        }).dblclick(self.editClick);

        if (self.selectNode) {

            $("#td" + self.selectNode.id).css({ "background-color": "#faffbe", "color": "#FF0000" });

        }

    };

    this.initGraph(data);

    this.initTreeData();

}

　　3. organizeTreeGraph.js：实现结构树的绘制

function renderTreeGraph(treeData) {

    //生成图形

    var tb = $('<table class="tb-node" cellspacing="0" cellpadding="0" align="center" border="0" style="border-width:0px;border-collapse:collapse;margin:0 auto;vertical-align:top"></table>');

    var tr = $('<tr></tr>');

    for (var i in treeData) {

        if (i > 0) $('<td>&nbsp;</td>').appendTo(tr);

        $('<td style="vertical-align:top;text-align:center;"></td>').append(createChild(treeData[i])).appendTo(tr);

    }

    tr.appendTo(tb);

    return tb;

}

//递归生成机构树图形

function createChild(node, ischild) {

    var length = (node.children || []).length;

    var colspan = length * 2 - 1;

    if (length == 0)

        colspan = 1;

    var fnTrVert = function () {

        var tr1 = $('<tr class="tr-vline"><td align="center" valign="top" colspan="' + colspan + '"><img class="img-v" src="'+rootPath+'/content/images/tree/Tree_Vert.gif" border="0"></td></tr>');

        return tr1;

    };

    //1.创建容器

    var tb = $('<table class="tb-node" cellspacing="0" cellpadding="0" align="center" border="0" style="border-width:0px;border-collapse:collapse;margin:0 auto;vertical-align:top"></table>');

    //var tb = $('<table style="BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid" border="1" cellspacing="0" cellpadding="2" align="center"></table>');

    //2.如果本节点是子节点，添加竖线在节点上面

    if (ischild) {

        fnTrVert().appendTo(tb);

    }

    // 3.添加本节点到图表

    var tr3 = utils.functionComment(function () {/*

<tr class="tr-node"><td align="center" valign="top" colspan="{0}">

    <table align="center" style="border:solid 2px" border="1" cellpadding="2" cellspacing="0">

        <tr>

            <td class="td-node" id='td{3}' data-node='{2}' align="center" valign="top" style="background-color:#f6f6ff;cursor:pointer;padding:2px;">{1}</td>

        </tr>

    </table>

</td></tr> */

    });

    tr3 = utils.formatString(tr3, colspan, node.organizeName, JSON.stringify(node),node.id);

    $(tr3).appendTo(tb);

    // 4.增加上下级的连接线

    if (length > 1) {

        //增加本级连接下级的首节点竖线，在节点下方

        fnTrVert().appendTo(tb);

        //增加本级连接下级的中间横线

        var tr4 = utils.functionComment(function () {/*

<tr class="tr-hline">

    <td colspan="1">

        <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

            <tbody>

                <tr>

                    <td width="50%" style="background:url(rootPath/content/images/tree/Tree_Empty.gif)"></td>

                    <td width="3px" height="3px" ><img src="rootPath/content/images/tree/Tree_Dot.gif" border="0"></td>

                    <td width="50%" style="background:url(rootPath/content/images/tree/Tree_Dot.gif)"></td>

                </tr>

            </tbody>

        </table>

    </td>

    <td style="background:url(rootPath/content/images/tree/Tree_Dot.gif)" colspan="{0}"></td>

    <td colspan="1">

        <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

            <tbody>

                <tr>

                    <td width="50%" style="background:url(rootPath/content/images/tree/Tree_Dot.gif)"></td>

                    <td width="3px" height="3px" ><img src="rootPath/content/images/tree/Tree_Dot.gif" border="0"></td>

                    <td width="50%" style="background:url(rootPath/content/images/tree/Tree_Empty.gif)"></td>

                </tr>

            </tbody>

        </table>

    </td>

</tr>*/});

        tr4 = tr4.replace(/rootPath/g,rootPath);

        tr4 = utils.formatString(tr4, colspan - 2);

        $(tr4).appendTo(tb);

    }

    //5.递归增加下级所有子节点到图表

    if (length > 0) {

        var tr5 = $('<tr></tr>');

        for (var i in node.children) {

            if (i > 0) {

                $('<td>&nbsp;</td>').appendTo(tr5);

            }

            $('<td style="vertical-align:top;text-align:center;"></td>').append(createChild(node.children[i], true)).appendTo(tr5);

        }

        tr5.appendTo(tb);

    }

    return tb;

}

二. 效果图

　　1. 访问：http://localhost:8080/ims/sys/organize.do

基于easyUI实现权限管理系统（一）一—组织结构树图形-LMLPHP

　　2. 选择一个机构，点击 设置角色

基于easyUI实现权限管理系统（一）一—组织结构树图形-LMLPHP

04-26 16:14
Powered by LMLPHP ©2024 organize 0.063525