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

使用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界面元件代替。

　　要了解更多的關于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;
}      

員工管理背景的一般處理程式如下：
      

　使用RDIFramework.NET 提供的員工管理服務接口，不僅可以實作對員工的增加、修改、删除、移動，按分頁得到員工資料、按組織機構得到員工清單等，還可以設定員工到使用者的映射關系，直接調用相應的服務接口即可，非常的友善。

　　第二部分：相關資源分享

1、基于.NET的快速資訊化系統開發整合架構 —RDIFramework.NET—系統目錄

2、Jquery EasyUI官方網站

3、Jquery學習官方網站

4、Jquery EasyUI本地執行個體檔案（如果嫌官網速度過慢，可以下載下傳這個看）

5、Jquery權威指南下載下傳

6、Jquery權威指南源代碼下載下傳

7、Jquery EasyUI 1.3中文.chm檔案下載下傳

8、JavaScript權威指南（第六版）中文版（強烈推薦）線上觀看

　第三部分：交流讨論

　　歡迎大家交流讨論，并提供寶貴意見，如果覺得對你有幫助，請點下推薦，謝謝。

作者： EricHu
出處： http://www.cnblogs.com/huyong
微網誌： 騰訊
Email: [email protected]
QQ 交流：406590790 
QQ 群：237326100
平台部落格： 【CSDN】http://blog.csdn.net/chinahuyong
         【CNBLOGS】http://www.cnblogs.com/huyong
關于作者：進階工程師、資訊系統項目管理師、DBA。專注于微軟平台項目架構、管理和企業解決方案，多年項目開發與管理經驗，曾多次組織并開發多個大型項目，精通DotNet，DB（SqlServer、Oracle等）技術。熟悉Java、Delhpi及Linux作業系統，有紮實的網絡知識。在面向對象、面向服務以及資料庫領域有一定的造詣。
如有問題或建議，請多多賜教！
本文版權歸作者和CNBLOGS部落格共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，如有問題，可以通過郵箱或QQ 聯系我，非常感謝。