使用Jquery+EasyUI 進行框架專案開發案例講解之三---角色管理原始碼分享

阿新 • • 發佈：2018-12-30

使用Jquery+EasyUI 進行框架專案開發案例講解之三

角色管理原始碼分享

　　在上兩篇文章

　　我們分享了使用Jquery EasyUI來進行UI佈局等開發的相關方法，也許你在使用EasyUI的過程過更熟練，有更方便快捷的技巧，我強烈建議你可以分享出來，大家共同進步、共同學習，謝謝！

　　接下來我分享“角色管理”模組主要的核心程式碼，角色管理主介面如下圖所示：

　　首先是角色管理的UI介面aspx程式碼如下：

<%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="RoleAdmin.aspx.cs" Inherits="RDIFramework.WebApp.Modules.RoleAdmin" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="../Scripts/jquery-checkbox.js" type="text/javascript"></script>
<script src="../Scripts/jQuery.Select.js" type="text/javascript"></script>
<script src="../Scripts/jquery.easyListSplitter.js" type="text/javascript"></script>
<script src="../Scripts/Business/RoleAdmin.js" type="text/javascript"></script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="toolbar">
    <%=base.BuildToolBarButtons() %>   角色分類：  <input id="txtCategory" name=Category type="text" style="width:200px" class="txt03" />  <a id="a_search" class="easyui-linkbutton" plain="true" icon="icon-search">查詢</a>
</div>
<div id="scolldiv" style="width:100%;overflow:auto;">
    <input id="hidrolecategory" type="hidden" value="" runat="server" />
 <asp:GridView ID="gvRoleList" runat="server" AutoGenerateColumns="False" CssClass="grid2" Width="100%">
        <Columns>        
        <asp:TemplateField ItemStyle-Width="1px"  ItemStyle-HorizontalAlign="Center"> 
            <ItemTemplate>
                <input type="hidden" value="<%#Eval("Id") %>" />               
            </ItemTemplate>
        </asp:TemplateField>
        <%--<asp:TemplateField ItemStyle-Width="20px"  ItemStyle-HorizontalAlign="Center" >            
            <ItemTemplate>                
                <%#Container.DataItemIndex+1 %>                
            </ItemTemplate>        
        </asp:TemplateField>  --%>
            <asp:BoundField DataField="Code" HeaderText="角色編號" ItemStyle-Width = "120px"/>           
            <asp:BoundField DataField="RealName" HeaderText="角色名稱"  ItemStyle-Width = "150px"/>            
            <asp:BoundField DataField="Enabled" HeaderText="有效" ItemStyle-Width = "80px"/>          
            <asp:BoundField DataField="Description" HeaderText="描述"/>
            <asp:TemplateField HeaderText="管理" ItemStyle-Width="320px" ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <a href="#" rel="edit" rid="<%#Eval("Id")%>"  <%if(!permissionEdit) {Response.Write("disabled");}%>   roleCategory ="<%#Eval("Category") %>" title="編輯當前角色"><span class="icon icon-group_edit"> </span>[修改]</a> 
                    <a style="cursor: pointer;" rel="delete"  rid="<%#Eval("Id") %>"  <%if(permissionDelete != true) {Response.Write("disabled");}%>   title="刪除當前角色"  ><span class="icon icon-group_delete"> </span>[刪除]</a> 
                    <a style="cursor: pointer;" rel="setuser"  rid="<%#Eval("Id") %>"  <%if(!permissionRoleUser) {Response.Write("disabled");}%>   title="設定當前角色所擁有的使用者"><span class="icon icon-group_link"> </span>[使用者]</a>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

<div id="w"></div><div id="d"></div>
<script type="text/javascript">
    $(document).ready(function () {
        // 瀏覽器的高度和div的高度  
        var height = $(window).height();
        var divHeight = $("#scolldiv").height();

        //獲取div物件  
        var divh = $("#scolldiv").get(0);

        //div高度大於螢幕高度把螢幕高度賦給div，並出現滾動條  
        if (divHeight > height - 40) {
            divh.style.height = height - 40;
            divh.style.overflow = "auto";
        }

        $('#txtCategory').combobox({
            url: 'handler/DataItemAdminHandler.ashx?action=GetCategory&categorycode=RoleCategory',
            method: 'get',
            valueField: 'ItemValue',
            textField: 'ItemName',
            editable: false,
            panelHeight: 'auto'
        });
    });  
</script>
</asp:Content>

綁定當前登入使用者所擁有的功能按鈕列表程式碼如下：

/// <summary>
/// 獲得頁面的許可權
/// </summary>
private void GetPermission()
{           
    this.permissionAdd = this.IsAuthorized("RoleManagement.Add");
    this.permissionEdit = this.IsAuthorized("RoleManagement.Edit");
    this.permissionExport = this.IsAuthorized("RoleManagement.Export");
    this.permissionDelete = this.IsAuthorized("RoleManagement.Delete");
    this.permissionRoleUser = this.IsAuthorized("RoleManagement.RoleUser");
}

/// <summary>
/// 載入工具欄
/// </summary>
/// <returns>工具欄HTML</returns>
public override string BuildToolBarButtons()
{
    StringBuilder sb = new StringBuilder();
    string linkbtn_template = "<a id=\"a_{0}\" class=\"easyui-linkbutton\" style=\"float:left\"  plain=\"true\" href=\"javascript:;\" icon=\"{1}\"  {2} title=\"{3}\">{4}</a>";
    sb.Append("<a id=\"a_refresh\" class=\"easyui-linkbutton\" style=\"float:left\"  plain=\"true\" href=\"javascript:;\" icon=\"icon-reload\"  title=\"重新載入\">重新整理</a> ");
    sb.Append("<div class='datagrid-btn-separator'></div> ");
    sb.Append(string.Format(linkbtn_template, "add", "icon-group-add", permissionAdd ? "" : "disabled=\"True\"", "新增角色", "新增"));
    sb.Append(string.Format(linkbtn_template, "edit", "icon-group_edit", permissionEdit ? "" : "disabled=\"True\"", "修改選中角色", "修改"));
    sb.Append(string.Format(linkbtn_template, "del", "icon-group_delete", permissionDelete ? "" : "disabled=\"True\"", "刪除選中角色", "刪除"));
    sb.Append("<div class='datagrid-btn-separator'></div> ");
    sb.Append(string.Format(linkbtn_template, "roleuser", "icon-group_link", permissionRoleUser ? "" : "disabled=\"True\"", "設定當前角色擁有的使用者", "使用者"));
    return sb.ToString(); 
}

private void InitGrid()
{    
    this.DTRole = base.GetRoleScope(this.PermissionItemCode);
    this.gvRoleList.DataSource = this.DTRole;
    this.gvRoleList.DataBind();
}

核心業務邏輯完整JS程式碼如下：

$(function () {
    addRole();
    editRole();
    delRole();

    $('#a_edit').click(function () {
        if ($(this).linkbutton('options').disabled == true) {
            return;
        }
        var i = $('table').data('tr_index');
        if (i > -1)
            $('.grid2 tr').eq(i).find("a[rel='edit']").click();
        else
            top.$('#notity').jnotifyAddMessage({ text: '請選擇要編輯的資料.', permanent: false, type: 'warning' });
    });

    $('#a_del').click(function () {
        if ($(this).linkbutton('options').disabled == true) {
            return;
        }
        var i = $('table').data('tr_index');
        if (i > -1)
            $('.grid2 tr').eq(i).find("a[rel='delete']").click();
        else
            top.$('#notity').jnotifyAddMessage({ text: '請選擇要刪除的資料.', permanent: false, type: 'warning' });
    });

    $('#a_roleuser').click(function () {
        if ($(this).linkbutton('options').disabled == true) {
            return;
        }
        var i = $('table').data('tr_index');
        if (i > -1)
            $('.grid2 tr').eq(i).find("a[rel='setuser']").click();
        else
            top.$('#notity').jnotifyAddMessage({ text: '請選擇要新增使用者的角色.', permanent: false, type: 'warning' });
    });

    $('#a_refresh').click(function () {
        window.location = 'RoleAdmin.aspx';
    });

    using('linkbutton', function () {
        $('#a_roleuser').linkbutton({ text: "成員" });
    });

    accreditUsers(); //授權角色包含的使用者
    searchUser();

    $('#txtCategory').combobox({
        onChange: function (newValue, oldValue) {
            $("#hidrolecategory").val(newValue) 
        }
    })
});

function scripthtmlStr() {
    var html = '<form id="uiform"><table cellpadding=5 cellspacing=0 width=100% align="center" class="grid" border=0><tr><td align="right">'
    html += '角色編號：</td><td align="left"><input id="txtCode"  name=Code type="text"  required="true" style="width:280px" class="txt03"/></td></tr><tr><td align="right">';
    html += '角色名稱：</td><td align="left"><input id="txtRealName"  name=RealName type="text"  required="true" style="width:280px" class="txt03"/></td></tr><tr><td align="right">';
    html += '角色分類：</td><td align="left"><input id="txtCategory" name=Category type="text"  required="true" style="width:280px" class="txt03" /></td></tr><tr><td align="right">';
    html += '有效性：</td><td align="left"><input id="chkEnabled" type="checkbox" name="Enabled" /><label>有效</label>  <span style="color:#666;padding-left:20px;">注：選中則啟用該角色。</span></td></tr><tr><td align="right"> ';
    html += '角色描述：</td><td align="left"><textarea rows="3" id="txtDescription"  name=Description style="width:280px;height:50px;" class="txt03"/></td></tr>';
    html += '</table></form>';
    return html;
}

function searchUser() {
    $('#a_search').click(function () {
        var vValue = $('#txtCategory').combobox('getValue') + '|' + $('#txtCategory').combobox('getText');
        top.$('#notity').jnotifyAddMessage({ text: vValue, permanent: false });
    });
}

function addRole() {
    $('#a_add').click(function () {
        if ($(this).linkbutton('options').disabled == true) {
            return;
        }
        top.$('#w').hWindow({ title: '新增角色', iconCls: 'icon-group-add', width: 450, height: 320, html: scripthtmlStr(), submit: function () {
            top.$('#txtCode').validatebox();
            top.$('#txtRealName').validatebox();
            top.$('#txtCategory').validatebox();

            var $txtrolecode = top.$('#txtCode');
            var $txtrolename = top.$('#txtRealName');
            var enabledSelected = top.$("#chkEnabled").attr("checked");
            var $txtdescription = top.$('#txtDescription');
            var vcategory = top.$('#txtCategory').combobox('getValue');

            if ($txtrolename.val() != '') {
                $.ajaxtext('handler/RoleAdminHandler.ashx?t=' + Math.random(), 'action=add&rolecode=' + $txtrolecode.val() + '&rolename=' + $txtrolename.val() + '&category=' + vcategory + '&enabled=' + enabledSelected + '&description=' + $txtdescription.val(), function (msg) {
                    if (msg == '1') {
                        top.$('#notity').jnotifyAddMessage({ text: '新增角色成功。', permanent: false });
                        top.$('#w').window('close');
                        window.location = 'RoleAdmin.aspx';
                    } else {
                        alert(msg);
                        return false;
                    }
                })

            } else {
                top.$('#notity').jnotifyAddMessage({ text: '請輸入角色名稱.', permanent: false });
                top.$('#txtRealName').focus();
            }
            return false;
        }
        });
        bindCategory();
        top.$('#txtCode').focus();
        top.$('#chkEnabled').attr("checked", true);
    });
}

function editRole() {
    $("a[rel='edit']").click(function () {
        if ($('#a_edit').linkbutton('options').disabled == true) {
            return;
        }
        var id = $(this).attr('rid');
        var roleCategory = $(this).attr('roleCategory');
        var tds = $(this).parent().siblings();
        top.$('#w').hWindow({ title: '編輯角色資訊', iconCls: 'icon-group_edit', width: 450, height: 320, html: scripthtmlStr(), submit: function () {
            var $txtrolecode = top.$('#txtCode');
            var $txtrealname = top.$('#txtRealName');
            var enabledSelected = top.$("#chkEnabled").attr("checked");
            var $txtdescription = top.$('#txtDescription');
            var vcategory = top.$('#txtCategory').combobox('getValue');

            if ($txtrealname.validatebox('isValid')) {
                $.ajaxtext('handler/RoleAdminHandler.ashx?n=' + Math.random(), 'action=edit&rolecode=' + $txtrolecode.val() + '&rolename=' + $txtrealname.val() + '&category=' + vcategory + '&enabled=' + enabledSelected + '&description=' + $.trim($txtdescription.val()) + '&roleid=' + id,
                function (msg) {
                    if (msg == '1') {
                        top.$('#notity').jnotifyAddMessage({ text: '角色資訊修改成功.', permanent: false });
                        top.$('#w').window('close');
                        window.location = 'RoleAdmin.aspx';
                    } else {
                        alert(msg);
                        return false;
                    }
                })
            }
        }
        });

        top.$('#txtRealName').validatebox();
        top.$('#txtCode').val(tds.eq(1).html().replace(' ', ''));
        top.$('#txtRealName').val(tds.eq(2).html().replace(' ', ''));
        //top.$('#txtCategory').val(roleCategory);
        top.$('#chkEnabled').attr("checked", tds.eq(3).html().replace(' ', '') == "1");
        top.$('#txtDescription').val(tds.eq(4).html().replace(' ', ''));
        bindCategory();
        top.$('#txtCategory').combobox("setValue", roleCategory);
    })
}

function delRole() {
    $("a[rel='delete']").click(function () {
        if ($('#a_del').linkbutton('options').disabled == true) {
            return;
        }
        var rid = $(this).attr('rid');
        if (rid != '') {
            $.messager.confirm('詢問提示', '你確認刪除當前所選角色嗎？', function (data) {
             if (data) {    
                    $.ajax({
                        type: 'post',
                        url: 'handler/RoleAdminHandler.ashx?t=<%=Guid.NewGuid().ToString() %>',
                        data: 'action=delete&roleid=' + rid,
                        beforeSend: function () { $.showLoading(); },
                        complete: function () { $.hideLoading(); },
                        success: function (msg) {
                            if (msg == '1') {
                                top.$('#notity').jnotifyAddMessage({ text: '角色刪除成功.', permanent: false });
                                window.location = 'RoleAdmin.aspx';
                            }
                            else
                                top.$('#notity').jnotifyAddMessage({ text: '角色刪除失敗.', permanent: false, type: 'warning' });
                        }
                    });
                }
            });
           
        }
        else {
            top.$('#notity').jnotifyAddMessage({ text: '請選擇要刪除的角色。', permanent: false, type: 'warning' });
        }
    });
}

function bindCategory() {
    top.$('#txtCategory').combobox({
        url: 'Modules/handler/DataItemAdminHandler.ashx?action=GetCategory&categorycode=RoleCategory',
        method: 'get',
        valueField: 'ItemValue',
        textField: 'ItemName',
        editable: false,
        panelHeight: 'auto'
    });
}

var formHtml = '<div style="border-bottom:1px solid #CCC; margin-bottom:5px;"><span id="role_name" class="icon32 icon-group32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;">角色名稱</span> </div>';
    formHtml += '<div style=" margin-bottom:10px;">描述：<input id="txtroleremark" type="text" readonly=true class="txt02" style="width:400px;color:#666;"></div>';
    formHtml += '<div> 成員：</div>';
    formHtml += '<select id="user_groups" size="10" style="width:475px; line-height:30px;height:195px;padding:5px"></select>';
    formHtml += '<div style="margin-top:2px;"><a href="#" id="group_add" class="easyui-linkbutton" plain="true" iconCls="icon-group-add">新增</a>';
    formHtml += '<a href="#" class="easyui-linkbutton" id="group_delete" plain="true" iconCls="icon-group-delete">移除</a>';
    formHtml += '<a href="#" class="easyui-linkbutton" id="group_clear" plain="true" iconCls="icon-clear">清空</a></div>'

var userList = '<table id="sp" cellpadding=5 cellspacing=0 width=100% align="center" ><tr><td><ul class="ul_users checkbox"></ul></td></tr></table><p><input type="checkbox" id="chkall" ><label id="labchkall" for="chkall"><b>全選</b></label></p>';
//授權使用者
function accreditUsers() {   
    $("a[rel='setuser']").click(function () {
        if ($('#a_roleuser').linkbutton('options').disabled == true) {
            return;
        }
        var i = $('table').data('tr_index');
        if (i == undefined) {
            top.$('#notity').jnotifyAddMessage({ text: '請選擇角色.', permanent: false, type: 'warning' });
            return false;
        }
        var tds = $('.grid2 tr:eq(' + i + ') td');
        var rid = tds.eq(0).find(':hidden').val(); //rid = $(this).attr('rid');

        top.$('#w').hWindow({ html: formHtml, width: 500, height: 400, title: '角色使用者', iconCls: 'icon-group_link', submit: function () {
            var users = new Array();
            var count = top.$('#user_groups').get(0).options.length;
            for (var i = 0; i < count; i++) {
                users.push(top.$('#user_groups').get(0).options[i].value);
            }

            $.ajaxtext('handler/RoleAdminHandler.ashx', 'action=setusers&users=' + users + '&roleid=' + rid, function (msg) {
                if (msg == "1") {
                    top.$('#notity').jnotifyAddMessage({ text: '設定成功。', permanent: false, type: 'message' });
                }
                else
                    alert(msg);

                top.$('#w').window('close');
            });
            return false;
        }
        });

        top.$('a.easyui-linkbutton').linkbutton({ disabled: false });
        top.$('#role_name').text(tds.eq(2).text());
        top.$('#txtroleremark').val(tds.eq(4).text());

        $.getJSON('handler/RoleAdminHandler.ashx?n=' + Math.random(), '&action=usersinrole&roleid=' + rid, function (json) {
            $.each(json, function (i, n) {
                top.$('#user_groups').append('<option value="' + n.Id + '">' + n.UserName + ' | ' + n.RealName + '</option>');
            });
        });


        top.$('#group_add').click(function () {
            top.$('#d').hDialog({ html: userList, title: '選取使用者', iconCls: 'icon-users', width: 800, height: 600,
                submit: function () {
                    var selectedUids = '';
                    top.$('#sp :checked').each(function () { //匹配所有sp中被選中的元素(checkbox中被選中的)
                        if (top.$(this).is(':checked'))
                            selectedUids += top.$(this).val() + ',';
                    });
                    if (selectedUids != '')
                        selectedUids = selectedUids.substr(0, selectedUids.length - 1);

                    if (selectedUids.length == 0) {
                        $.messager.alert('請至少選擇一個使用者！', msg, 'warning');
                        return false;
                    } else {
                        var users = top.$('#sp').data('allusers');
                        var selarr = getSelectedUsers(users, selectedUids);
                        top.$('#user_groups').empty();
                        top.$('#sp').removeData('allusers');
                        $.each(selarr, function (i, n) {
                            top.$('#user_groups').append('<option value="' + n.Id + '">' + n.UserName + ' | ' + n.RealName + '</option>');
                        });

                        top.$('#d').dialog("close");
                    }
                }
            });


            var lis = '';
            $.getJSON('handler/UserAdminHandler.ashx?n=' + Math.random(), '', function (json) {
                $.each(json, function (i, n) {
                    lis += '<li><input type="checkbox" value="' + n.Id + '" /><label>' + n.UserName + ' | ' + n.RealName + '</label></li>';
                });
                top.$('.ul_users').empty().append(lis);
                top.$('#sp').data('allusers', json);
            });



            top.$('#labchkall').click(function () {
                var flag = $(this).prev().is(':checked');
                var pers = $(this).parent().parent().prev();

                if (!flag) {
                    top.$(":checkbox", '#sp').attr("checked", true);
                }
                else {
                    top.$(":checkbox", '#sp').attr("checked", false);
                }
            });
        });

        top.$('#group_delete').click(function () {
            var i = top.$('#user_groups').get(0).selectedIndex;

            if (i > -1) {
                var uid = top.$('#user_groups option:selected').val(); //選中的值或 top.$("#user_groups").find("option:selected").val();
                var uname = top.$('#user_groups option:selected').text(); //選中的文字 或top.$("#user_groups").find("option:selected").text();

                top.$('#user_groups').get(0).remove(i);
                $.ajaxtext('handler/RoleAdminHandler.ashx', 'action=removeuserfromrole&uid=' + uid + '&roleid=' + rid, function (msg) {
                    if (msg == "1") {
                        top.$('#notity').jnotifyAddMessage({ text: '移除成功。', permanent: false, type: 'message' });
                    }
                    else {
                        top.$.messager.alert('提示資訊', msg, 'warning');
                    }
                });
            }
            else {
                top.$.messager.alert("操作提示", "請選擇要移除的使用者！", "info");
            }
        });
        top.$('#group_clear').click(function () {
//            var count = $("#user_groups option").length
//            if (count <= 0) {
//                top.$.messager.alert("操作提示", "當前角色沒有使用者！", "info");
//                return;
//            }

            top.$.messager.confirm('詢問提示', '確認要清除所有使用者嗎？', function (data) {
                if (data) {
                    top.$('#user_groups').empty();
                }
            });
            return false;
        });
    });
}

function getSelectedUsers(users, selecedVals) {
    var arrUserid = eval('[' + selecedVals + ']');
    var arr = new Array();
    $.each(users, function (i, n) {
        if ($.inArray(n.Id, arrUserid) > -1)
            arr.push(n);
    });
    return arr;
}

角色新增介面如下：

角色修改介面：

　　角色使用者設定介面：

在上圖中，我們可以新增、移除、清空當前角色包含的使用者。

　　選擇新增，開啟“選取使用者”視窗，如下圖所示：

　　角色使用者設定及使用者選擇介面JS程式碼如下：

var formHtml = '<div style="border-bottom:1px solid #CCC; margin-bottom:5px;"><span id="role_name" class="icon32 icon-group32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;">角色名稱</span> </div>';
    formHtml += '<div style=" margin-bottom:10px;">描述：<input id="txtroleremark" type="text" readonly=true class="txt02" style="width:400px;color:#666;"></div>';
    formHtml += '<div> 成員：</div>';
    formHtml += '<select id="user_groups" size="10" style="width:475px; line-height:30px;height:195px;padding:5px"></select>';
    formHtml += '<div style="margin-top:2px;"><a href="#" id="group_add" class="easyui-linkbutton" plain="true" iconCls="icon-group-add">新增</a>';
    formHtml += '<a href="#" class="easyui-linkbutton" id="group_delete" plain="true" iconCls="icon-group-delete">移除</a>';
    formHtml += '<a href="#" class="easyui-linkbutton" id="group_clear" plain="true" iconCls="icon-clear">清空</a></div>'

var userList = '<table id="sp" cellpadding=5 cellspacing=0 width=100% align="center" ><tr><td><ul class="ul_users checkbox"></ul></td></tr></table><p><input type="checkbox" id="chkall" ><label id="labchkall" for="chkall"><b>全選</b></label></p>';

//授權使用者
function accreditUsers() {   
    $("a[rel='setuser']").click(function () {
        if ($('#a_roleuser').linkbutton('options').disabled == true) {
            return;
        }
        var i = $('table').data('tr_index');
        if (i == undefined) {
            top.$('#notity').jnotifyAddMessage({ text: '請選擇角色.', permanent: false, type: 'warning' });
            return false;
        }
        var tds = $('.grid2 tr:eq(' + i + ') td');
        var rid = tds.eq(0).find(':hidden').val(); //rid = $(this).attr('rid');

        top.$('#w').hWindow({ html: formHtml, width: 500, height: 400, title: '角色使用者', iconCls: 'icon-group_link', submit: function () {
            var users = new Array();
            var count = top.$('#user_groups').get(0).options.length;
            for (var i = 0; i < count; i++) {
                users.push(top.$('#user_groups').get(0).options[i].value);
            }

            $.ajaxtext('handler/RoleAdminHandler.ashx', 'action=setusers&users=' + users + '&roleid=' + rid, function (msg) {
                if (msg == "1") {
                    top.$('#notity').jnotifyAddMessage({ text: '設定成功。', permanent: false, type: 'message' });
                }
                else
                    alert(msg);

                top.$('#w').window('close');
            });
            return false;
        }
        });

        top.$('a.easyui-linkbutton').linkbutton({ disabled: false });
        top.$('#role_name').text(tds.eq(2).text());
        top.$('#txtroleremark').val(tds.eq(4).text());

        $.getJSON('handler/RoleAdminHandler.ashx?n=' + Math.random(), '&action=usersinrole&roleid=' + rid, function (json) {
            $.each(json, function (i, n) {
                top.$('#user_groups').append('<option value="' + n.Id + '">' + n.UserName + ' | ' + n.RealName + '</option>');
            });
        });


        top.$('#group_add').click(function () {
            top.$('#d').hDialog({ html: userList, title: '選取使用者', iconCls: 'icon-users', width: 800, height: 600,
                submit: function () {
                    var selectedUids = '';
                    top.$('#sp :checked').each(function () { //匹配所有sp中被選中的元素(checkbox中被選中的)
                        if (top.$(this).is(':checked'))
                            selectedUids += top.$(this).val() + ',';
                    });
                    if (selectedUids != '')
                        selectedUids = selectedUids.substr(0, selectedUids.length - 1);

                    if (selectedUids.length == 0) {
                        $.messager.alert('請至少選擇一個使用者！', msg, 'warning');
                        return false;
                    } else {
                        var users = top.$('#sp').data('allusers');
                        var selarr = getSelectedUsers(users, selectedUids);
                        top.$('#user_groups').empty();
                        top.$('#sp').removeData('allusers');
                        $.each(selarr, function (i, n) {
                            top.$('#user_groups').append('<option value="' + n.Id + '">' + n.UserName + ' | ' + n.RealName + '</option>');
                        });

                        top.$('#d').dialog("close");
                    }
                }
            });


            var lis = '';
            $.getJSON('handler/UserAdminHandler.ashx?n=' + Math.random(), '', function (json) {
                $.each(json, function (i, n) {
                    lis += '<li><input type="checkbox" value="' + n.Id + '" /><label>' + n.UserName + ' | ' + n.RealName + '</label></li>';
                });
                top.$('.ul_users').empty().append(lis);
                top.$('#sp').data('allusers', json);
            });



            top.$('#labchkall').click(function () {
                var flag = $(this).prev().is(':checked');
                var pers = $(this).parent().parent().prev();

                if (!flag) {
                    top.$(":checkbox", '#sp').attr("checked", true);
                }
                else {
                    top.$(":checkbox", '#sp').attr("checked", false);
                }
            });
        });

        top.$('#group_delete').click(function () {
            var i = top.$('#user_groups').get(0).selectedIndex;

            if (i > -1) {
                var uid = top.$('#user_groups option:selected').val(); //選中的值或 top.$("#user_groups").find("option:selected").val();
                var uname = top.$('#user_groups option:selected').text(); //選中的文字 或top.$("#user_groups").find("option:selected").text();

                top.$('#user_groups').get(0).remove(i);
                $.ajaxtext('handler/RoleAdminHandler.ashx', 'action=removeuserfromrole&uid=' + uid + '&roleid=' + rid, function (msg) {
                    if (msg == "1") {
                        top.$('#notity').jnotifyAddMessage({ text: '移除成功。', permanent: false, type: 'message' });
                    }
                    else {
                        top.$.messager.alert('提示資訊', msg, 'warning');
                    }
                });
            }
            else {
                top.$.messager.alert("操作提示", "請選擇要移除的使用者！", "info");
            }
        });
        top.$('#group_clear').click(function () {
//            var count = $("#user_groups option").length
//            if (count <= 0) {
//                top.$.messager.alert("操作提示", "當前角色沒有使用者！", "info");
//                return;
//            }

            top.$.messager.confirm('詢問提示', '確認要清除所有使用者嗎？', function (data) {
                if (data) {
                    top.$('#user_groups').empty();
                }
            });
            return false;
        });
    });
}

特別說明一下，在選取使用者介面，使用的是checkbox控制元件，得到選中的checkbox，是使用下面的例項程式碼：

<input id="checkbox1" type="checkbox" checked>
<input id="checkbox2" type="checkbox>

$("#checkbox1").is(":checked") // true
$("#checkbox2").is(":checked") // false
//注意不是使用下面的方法
$("#checkbox1").attr("checked") // checked
$("#checkbox2").attr("checked") // undefined

　角色管理一般處理程式如下：

相關資源分享

作者：
出處：
Email：[email protected]
QQ交流：406590790
QQ群：237326100
框架部落格：http://blog.csdn.net/chinahuyong
http://www.cnblogs.com/huyong
RDIFramework.NET，基於.NET的快速資訊化系統開發、整合框架，給使用者和開發者最佳的.Net框架部署方案。
關於作者：高階工程師、資訊系統專案管理師、DBA。專注於微軟平臺專案架構、管理和企業解決方案，多年專案開發與管理經驗，曾多次組織並開發多個大型專案，在面向物件、面向服務以及資料庫領域有一定的造詣。現主要從事基於框架的技術開發、諮詢工作，主要服務於金融、醫療衛生、鐵路、電信、物流、物聯網、製造、零售等行業。
如有問題或建議，請多多賜教！
本文版權歸作者和CSDN共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，如有問題，可以通過郵箱或QQ 聯絡我，非常感謝。

使用Jquery+EasyUI 進行框架專案開發案例講解之三---角色管理原始碼分享

使用Jquery+EasyUI 進行框架專案開發案例講解之三---角色管理原始碼分享

使用Jquery+EasyUI 進行框架專案開發案例講解之三角色管理原始碼分享

使用Jquery+EasyUI 進行框架專案開發案例講解之二---使用者管理原始碼分享

使用Jquery+EasyUI 進行框架專案開發案例講解之四組織機構管理原始碼分享

使用Jquery+EasyUI 進行框架專案開發案例講解之四--組織機構管理原始碼分享

使用Jquery+EasyUI進行框架專案開發案例講解之一---員工管理原始碼分享

【推薦】使用Jquery+EasyUI進行框架專案開發案例講解之一---員工管理原始碼分享

使用Jquery+EasyUI 進行框架專案開發案例講解之一員工管理原始碼分享

一、web專案開發進階之分模組管理專案之通用模組

asp.net mvc+jquery easyui開發實戰教程之網站後臺管理系統開發2-Model層建立

基於vue框架專案開發過程中遇到的問題總結（一）

Android中MVC框架式開發例項講解

第103講 zendstudio的使用專案開發五個階段，僱員管理系統①

微信小程式雲開發——模板講解之雲函式

Java爬蟲專案實戰案例四之Jsoup使用

TMS320F28335專案開發記錄7_28335之時鐘

Coco2d-x 塔防遊戲“賊來了”之開發簡檔之三（完結）

測試開發linux面試之三：後臺進程之操作

【軟體開發底層知識修煉】三深入淺出處理器之三記憶體管理與記憶體管理單元（MMU）

Java集合框架之三：HashMap原始碼解析 Java集合框架之三：HashMap原始碼解析

使用Jquery+EasyUI 進行框架專案開發案例講解之三---角色管理原始碼分享

相關推薦