使用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

 

第一部分：員工管理原始碼解說

 員工（職員）管理主要是對集團、企事業內部員工進行管理。在後面的章節能夠看到有一個使用者管理，這兩者有什麼關係呢？員工包括當前企事業單位的全部職員（如保安、保潔員等），這些員工不一定都須要登入到系統中做對應的業務操作，而使用者則是能夠登入到系統中進行操作的系統使用者。假設某個職員也能夠進行登入，那麼我們能夠不必要再為其加一條使用者資訊，能夠直接做個映射就可以把當前員工（職員）映射為使用者。員工（職員）管理組件括員工的新增、編輯、刪除、離職處理、匯出、匯入員工資訊等操作。在架構主介面導航區選擇“員工管理”進入員工管理主介面，例如以所看到的：

 

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

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

員工管理的功能button是依據目前使用者所擁有的許可權進行動態設定其可用性的，也能夠設定為可見或不可見。如，在上面的aspx介面代碼中有以下這樣一段代碼：

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

上面這段代碼就是我們綁定button的關鍵，綁定的button，通過後台服務代碼來實現，依據當前登入使用者所擁有的許可權，動態設定其可用的功能，後台代碼例如以下：

在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(‘username已存在，請更改username。‘);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 刪除所選員工

對於須要刪除的員工資料，我們能夠對其進行刪除（架構中的刪除全是邏輯刪除，即打刪除標誌），當前，刪除前提示一下使用者，這樣比較友好一些，例如以下：

使用Jquery+EasyUI進行架構項目開發案例解說之中的一個---員工管理原始碼分享