使用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的資訊，可以到它的官網看看，地址為：

     

首先是員工管理的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>

<div id="toolbar"><%=base.BuildToolBarButtons()%>               </div>
上面這段代碼就是我們綁定按鈕的關鍵，綁定的按鈕，通過後台服務代碼來實現，根據當前登入使用者所擁有的許可權，動態設定其可用的功能，後台代碼如下：
$('#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);}}});}
修改介面代碼與增加的代碼類似，只不過修改介面在彈出時，要綁定當前修改的資料，Binder 方法有很多種，如：通過使用者選擇的目前使用者datagrid當前行返回，這種對於欄位列不多時比較適合，但如果欄位比較多， 我們不可能把所有欄位都載入到介面上來，一般只是顯示一些比較常用的欄位給使用者，這時我們可以通過當前所選的行的主索引值或唯一性來得到待修改的資料進行綁定，我們這兒的員工編輯介面就是採用的後一種方式，代碼如下所示：
var parm = 'action=GetEntity&KeyId=' + row.Id;$.ajaxjson(actionUrl, parm, function (data) {if (data) {//OrganizeIdtop.$('#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權威指南（第六版）中文版（強烈推薦）線上觀看

第三部分：交流討論
 推薦