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

　　在開始講解之前，我們先來看一下什么是Jquery EasyUI？jQuery EasyUI是一組基于jQuery的UI插件集合，而jQuery EasyUI的目標就是幫助web開發者更輕松的打造出功能豐富并且美觀的UI界面。開發者不需要編寫復雜的javascript，也不需要對css樣式有深入的了解，開發者需要了解的只有一些簡單的html標簽。jQuery EasyUI為我們提供了大多數UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。jQuery EasyUI是基于JQuery的一個前臺ui界面的插件，功能相對沒extjs強大，但頁面也是相當好看的。一些功能也足夠開發者使用，相對于extjs更輕量。相對ExtJs，我更喜歡Easy UI，即是沒有的功能，我們也可以使用其他替代的UI界面組件代替。　　要了解

使用Jquery+EasyUI 進行框架項目開發案例講解之一

員工管理源碼分享

　　要了解更多的關于EasyUI的信息，可以到它的官網看看，地址為：

http://www.jeasyui.com/index.php

　第一部分：員工管理源碼講解　　

　　員工（職員）管理主要是對集團、企事業內部員工進行管理。在4.5章節可以看到有一個用戶管理，這兩者有什么關系呢？員工包含當前企事業單位的所有職員（如保安、保潔員等），這些員工不一定都需要登錄到系統中做相應的業務操作，而用戶則是可以登錄到系統中進行操作的系統使用者。如果某個職員也可以進行登錄，那么我們可以不必要再為其加一條用戶信息，可以直接做個映射即可把當前員工（職員）映射為用戶。員工（職員）管理包括員工的新增、編輯、刪除、離職處理、導出、導入員工信息等操作。在框架主界面導航區選擇“員工管理”進入員工管理主界面，如下圖所示：

　可以看到，整個界面除了左側的導航區，右邊的工作區分為兩部分，樹型組織機構導航與員工的列表展示。功能分為添加、修改刪除等。下面我們來看下如何實現上面的功能。

　　首先是員工管理的UI界面aspx代碼如下：

<%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="StaffAdmin.aspx.cs" Inherits="RDIFramework.WebApp.Modules.StaffAdmin" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style type="text/css">
    div#navigation{background:white}
    div#wrapper{float:right;width:100%;margin-left:-185px}
    div#content{margin-left:185px}
    div#navigation{float:left;width:180px}
</style>

</asp:Content> 
<asp:Content ID="Content2"  ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="layout">
            <div region="west" iconCls="icon-chart_organisation" split="true" title="組織機構" style="width:220px;padding: 5px" collapsible="false">
                <ul id="organizeTree"></ul>
            </div>
            <div region="center" title="員工管理" iconCls="icon-users" style="padding: 2px; overflow: hidden">
                <div id="toolbar">
                   <%=base.BuildToolBarButtons()%>               
                </div>
                <table id="staffGird" toolbar="#toolbar"></table>

            </div>
    </div>
    <script type="text/javascript" src="../Scripts/Business/StaffAdmin.js?v=5"></script>
</asp:Content>

　　注意，在上面的代碼中，我們要引用界面業務邏輯的js文件，如下：

<script type="text/javascript" src="../Scripts/Business/StaffAdmin.js?v=5"></script>

　　員工管理的功能按鈕是根據當前用戶所擁有的權限進行動態設置其可用性的，也可以設置為可見或不可見。如，在上面的aspx界面代碼中有以下這樣一段代碼：

<div id="toolbar">
    <%=base.BuildToolBarButtons()%>               
</div>

  上面這段代碼就是我們綁定按鈕的關鍵，綁定的按鈕，通過后臺服務代碼來實現，根據當前登錄用戶所擁有的權限，動態設置其可用的功能，后臺代碼如下：

　　在StaffAdmin.js代碼中，員工管理工作區我們首先要加載左側的組織機構列表（使用easy ui 的tree控件）與右側的員工列表（使用easy ui的datagrid控件）。

　　1.1、加載組織機構樹列表。　　

$('#organizeTree').tree({
    lines: true,
    url: 'handler/OrganizeAdminHander.ashx?action=treedata',
    animate: true,
    onLoadSuccess:function(node,data) {
        $('body').data('depData', data);
    },onClick: function(node) {
        var selectedId = node.id;        
        $('#staffGird').datagrid('load', { organizeId: selectedId });
    }
});

　　1.2、加載所選組織機構下的員工列表。

　　加載員工列表，我們是通過選擇相應的組織機構來進行加載，這樣不至于一下子把所有的員工數據全部加載進來，影響頁面的加載效率。選擇一個組織機構節點，應該可以加載當前所選節點及其子節點所擁有的員工列表才對。當然，這也可以根據客戶要求進行相應的調整，具體實需求而定。我們要加載所選組織機構下的員工列表，就需要綁定組織機構（Tree控件）的onClick事件或onSelect事件都可以，這兒我們使用onClick事件，事件使用事例如下：

$('#organizeTree').tree({
    onClick: function(node){
        alert(node.text);  // alert node text property when clicked
    }
});

　　在我們的組織機構事中，我們通過單擊相應節點，加載相應的員工數據，代碼如下：　　

onClick: function(node) {
        var selectedId = node.id;        
        $('#staffGird').datagrid('load', { organizeId: selectedId });
}

　　綁定員工列表的代碼如下：

$('#staffGird').datagrid({
    url: "handler/StaffAdminHandler.ashx",
    title: "員工（職員）列表",
    loadMsg: "正在加載員工（職員）數據，請稍等...",
    width: size.width,
    height: size.height,
    idField: 'Id',
    singleSelect: true,
    striped: true,
    rownumbers: true,
    columns: [[
            { title: '主鍵', field: 'Id', hidden: true },
            { title: '編號', field: 'Code', width: 100 },
            { title: '姓名', field: 'RealName', width: 100 },
            { title: '性別', field: 'Gender', width: 35, align: 'center' },
            { title: '出生日期', field: 'Birthday', align: "center", width: 90 },
            { title: '手機號碼', field: 'Mobile', width: 120 },
            { title: '辦公電話', field: 'OfficePhone', width: 120 },
            { title: '郵箱地址', field: 'Email', width: 150 },
            { title: '有效', field: 'Enabled', width: 50, align: 'center', formatter: imgcheckbox },
            { title: '描述', field: 'Description', width: 260 },
            { title: 'UserId', field: 'UserId', hidden: true }
        ]],
    rowStyler: function (index, row, css) {
        if (row.UserId != "") {
            return 'font-weight:bold;';
        }
    },
    onLoadSuccess: function (data) {
        if (data.rows.length > 0) {
            $('#staffGird').datagrid("selectRow", 0);
        }
    }
});

　　在上面的列綁定代碼中，我們有一個字段“有效”列，可以看到根據當前員工有效性，綁定了不同的圖標，這兒使用了datagrid列的表格轉換函數“formatter”。對于的imgcheckbox代碼如下：

var imgcheckbox = function (cellvalue, options, rowObject) {
    return cellvalue ? '<img src="/css/icon/ok.png" alt="正常" title="正常" />' : '<img src="/css/icon/stop.png" alt="禁用" title="禁用" />';
};

　　上面的代碼，我們就完成了員工管理主頁面的加載綁定。下面我們來看一下，增刪改相關UI邏輯代碼。

　　1.3 新增員工信息

　　新增員工（職員）界面如下：

　　由于員工數據列信息較多，我們采用了easyUI Tabs進行布局，使得整個界面比較清晰整潔。同時還使用了combobox、datebox、validatebox等UI控件，如下所示：

　　具體的控件使用方法可以查看文章結尾提供的相應資源。我們來看一下，如何綁定combobox控件，由于我們這兒有很多combobox控件的綁定都是提供了RDIFramework.NET框架的數據字典部分，因此綁定函數做成一個公共的比較好，這樣方便調用。這些綁定都是在加載界面前進行的頁面初始化操作，代碼如下：

initData: function (organizeId) {
    top.$('#txt_Education,#txt_Degree,#txt_Title,#txt_TitleLevel,#txt_WorkingProperty,#txt_Party,#txt_Gender').combobox({ panelHeight: 'auto' });
    top.$('#txt_Birthday,#txt_TitleDate,#txt_WorkingDate,#txt_DimissionDate,#txt_JoinInDate').datebox({
        formatter: function (date) {
            return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
        },
        arser: function (date) {
            return new Date(Date.parse(date.replace(/-/g, "/")));
        }
    });

    var _organizeId = organizeId || 0;
    top.$('#txt_OrganizeId').combotree({
        data: organizeTree.data(),
        valueField: 'id',
        textField: 'text',
        value: _organizeId
    });
    //綁定各數據字典
    pubMethod.bindCategory('txt_Gender', 'Gender');
    pubMethod.bindCategory('txt_Education', 'Education');
    pubMethod.bindCategory('txt_WorkingProperty', 'WorkingProperty');
    pubMethod.bindCategory('txt_Degree', 'Degree');
    pubMethod.bindCategory('txt_Gender', 'Gender');
    pubMethod.bindCategory('txt_Title', 'Title');
    pubMethod.bindCategory('txt_TitleLevel', 'TitleLevel');
    pubMethod.bindCategory('txt_Nationality', 'Nationality');
    pubMethod.bindCategory('txt_Party', 'PoliticalStatus')
    top.$('#staffTab').tabs({
        onSelect: function () {
            top.$('.validatebox-tip').remove();
        }
    });
    top.$('#txt_passSalt').val(randomString());

}

　　綁定數據字典的代碼如下：　

//公共方法
var pubMethod = {
    bindCategory: function (categoryControl,categoryCode) {
        if (categoryControl == ''|| categoryCode == '')
        {
            return;
        }

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

　　新增員工的代碼如下：

//公共變量
var actionUrl = 'handler/StaffAdminHandler.ashx';
var formUrl = "Modules/html/StaffForm.htm";

AddStaff: function () { //增加員工（職員）
    if ($(this).linkbutton('options').disabled == true) {
        return;
    }
    //功能代碼邏輯...
    var addDialog = top.$.hDialog({
        href: formUrl + '?v=' + Math.random(),
        width: 680,
        height: 500,
        title: '新增員工（職員）',
        iconCls: 'icon-vcard_add',
        onLoad: function () {
            var dep = $('#organizeTree').tree('getSelected');
            var depID = 0;
            if (dep) {
                depID = dep.id || 0;
            };
            top.$('#chk_Enabled').attr("checked", true);
            //如果左側有選中組織機構，則添加的時候，部門默認選中
            StaffAdminMethod.initData(depID);
        },
        closed: false,
        submit: function () {
            var tab = top.$('#staffTab').tabs('getSelected');
            var index = top.$('#staffTab').tabs('getTabIndex', tab);
            if (top.$('#uiform').form('validate')) {
                //var query = createParam('add', 0) + '&roles=' + top.$('#txt_role').combo('getValues');
                var vOrganizeId = top.$('#txt_OrganizeId').combobox('getValue');
                var query = 'action=AddStaff&vOrganizeId=' + vOrganizeId + '&' + top.$('#uiform').serialize();

                $.ajaxjson(actionUrl, query, function (d) {
                    if (d.Success) {
                        msg.ok('添加成功');
                        mygrid.reload();
                        addDialog.dialog('close');
                    } else {
                        if (d.Data == -2) {
                            msg.error('用戶名已存在，請更改用戶名。');
                            if (index > 0)
                                top.$('#staffTab').tabs('select', 0);
                            top.$('#txt_username').select();
                        } else {
                            MessageOrRedirect(d);
                        }
                    }
                });
            } else {
                if (index > 0)
                    top.$('#staffTab').tabs('select', 0);
            }
        }
    });
}

　　修改界面代碼與增加的代碼類似，只不過修改界面在彈出時，要綁定當前修改的數據，綁定方法有很多種，如：通過用戶選擇的當前用戶datagrid當前行返回，這種對于字段列不多時比較適合，但如果字段比較多，我們不可能把所有字段都加載到界面上來，一般只是顯示一些比較常用的字段給用戶，這時我們可以通過當前所選的行的主鍵值或唯一性來得到待修改的數據進行綁定，我們這兒的員工編輯界面就是采用的后一種方式，代碼如下所示：

var parm = 'action=GetEntity&KeyId=' + row.Id;
$.ajaxjson(actionUrl, parm, function (data) {
    if (data) {
        //OrganizeId
        top.$('#txt_Code').val(data.Code);
        top.$('#txt_RealName').val(data.RealName);
        top.$('#txt_Birthday').datebox('setValue', data.Birthday);
        top.$('#txt_Gender').combobox('setValue', data.Gender);
        top.$('#txt_Age').val(data.Age);
        top.$('#txt_Major').val(data.Major);
        top.$('#txt_School').val(data.School);
        top.$('#txt_Education').combobox('setValue', data.Education);
        top.$('#txt_Degree').combobox('setValue', data.Degree);
        top.$('#txt_Title').combobox('setValue', data.Title);
        top.$('#txt_TitleLevel').combobox('setValue', data.TitleLevel);
        top.$('#txt_TitleDate').datebox('setValue', data.TitleDate);
        /*省略部分代碼...*/
        top.$('#chk_Enabled').attr('checked',data.Enabled == "1");
        top.$('#txt_Description').val(data.Description);
    }
});

　　修改后，單擊確定，即可保存當前修改的數據，如下所示：

if (top.$('#uiform').validate().form()) {
    var vOrganizeId = top.$('#txt_OrganizeId').combobox('getValue');
    var query = 'action=EditStaff&vOrganizeId=' + vOrganizeId + '&KeyId=' + row.Id + '&' + top.$('#uiform').serialize();
    $.ajaxjson(actionUrl, query, function (d) {
        if (d.Success) {
            msg.ok(d.Message);
            editDailog.dialog('close');
            mygrid.reload();
        } else {
            MessageOrRedirect(d);
        }
    });
}

1.4 刪除所選員工

　　對于需要刪除的員工數據，我們可以對其進行刪除（框架中的刪除全是邏輯刪除，即打刪除標志），當前，刪除前提示一下用戶，這樣比較友好一些，如下：

　　代碼如下：

var row = mygrid.selectRow();
if (row != null) {
    var query = 'action=DeleteStaff&KeyId=' + row.Id;
    $.messager.confirm('詢問提示', '確定要刪除選中的員工（職員）嗎？', function (data) {
        if (data) {
            $.ajaxjson(actionUrl, query, function (d) {
                if (d.Success) {
                    msg.ok(d.Message);
                    mygrid.reload();
                } else {
                    MessageOrRedirect(d);
                }
            });
        }
        else {
            return false;
        }
    });
}
else {
    msg.warning('請選擇要刪除的操作權限項!');
    return false;
}

　　員工管理后臺的一般處理程序如下：