【推薦】使用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.一、加載組織機構樹列表。 　　

$('#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.二、加載所選組織機構下的員工列表。

　　加載員工列表，咱們是經過選擇相應的組織機構來進行加載，這樣不至於一會兒把全部的員工數據所有加載進來，影響頁面的加載效率。選擇一個組織機構節點，應該能夠加載當前所選節點及其子節點所擁有的員工列表纔對。固然，這也能夠根據客戶要求進行相應的調整，具體實需求而定。咱們要加載所選組織機構下的員工列表，就須要綁定組織機構（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 提供的員工管理服務接口，不只能夠實現對員工的增長、修改、刪除、移動，按分頁獲得員工數據、按組織機構獲得員工列表等，還能夠設置員工到用戶的映射關係，直接調用相應的服務接口便可，很是的方便。 

　　第二部分：相關資源分享 

一、基於.NET的快速信息化系統開發整合框架 —RDIFramework.NET—系統目錄

二、Jquery EasyUI官方網站

三、Jquery學習官方網站

 四、Jquery EasyUI本地實例文件（若是嫌官網速度過慢，能夠下載這個看）

五、Jquery權威指南下載

六、Jquery權威指南源代碼下載

七、Jquery EasyUI 1.3中文.chm文件下載

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

 　第三部分：交流討論

　　歡迎你們交流討論，並提供寶貴意見，若是以爲對你有幫助，請點下推薦，謝謝。