编程 centos 程序员 linux nginx google Windows Ubuntu 开源 apache 微软 mysql wordpress shell php 云计算 Firefox Android Python java

【推薦】使用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章節可以看到有一個用戶管理,這兩者有什麽關系呢?員工包含當前企事業單位的所有職員(如保安、保潔員等),這些員工不一定都需要登錄到系統中做相應的業務操作,而用戶則是可以登錄到系統中進行操作的系統使用者。如果某個職員也可以進行登錄,那麽我們可以不必要再為其加一條用戶信息,可以直接做個映射即可把當前員工(職員)映射為用戶。員工(職員)管理包括員工的新增、編輯、刪除、離職處理、導出、導入員工信息等操作。在框架主界面導航區選擇“員工管理”進入員工管理主界面,如下圖所示:

10164454-6c0dd4ff12644e849511f0dcd8f0cd4

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<%@ 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文件,如下:

1

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

  员工管理的功能按钮是根据当前用户所拥有的权限进行动态设置其可用性的,也可以设置为可见或不可见。如,在上面的aspx界面代码中有以下这样一段代码:

1

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

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


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

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

1

2

3

4

5

6

7

8

9

10

11

$('#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事件,事件使用事例如下:

1

2

3

4

5

$('#organizeTree').tree({

    onClick: function(node){

        alert(node.text);  // alert node text property when clicked

    }

});

  在我们的组织机构事中,我们通过单击相应节点,加载相应的员工数据,代码如下:

1

2

3

4

onClick: function(node) {

        var selectedId = node.id;      

        $('#staffGird').datagrid('load', { organizeId: selectedId });

}

 绑定员工列表的代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

$('#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代码如下:

 

1

2

3

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 新增员工信息

新增员工(职员)界面如下:

10164524-31e1c1aa01a247b0a8fb8a57e348087

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

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());

}

绑定数据字典的代码如下:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

//公共方法

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'

        });

    }

}

新增员工的代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

//公共变量

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當前行返回,這種對於字段列不多時比較適合,但如果字段比較多, 我們不可能把所有字段都加載到界面上來,一般只是顯示一些比較常用的字段給用戶,這時我們可以通過當前所選的行的主鍵值或唯一性來得到待修改的數據進行綁定,我們這兒的員工編輯界面就是采用的後一種方式,代碼如下所示:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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);

    }

});

  修改后,单击确定,即可保存当前修改的数据,如下所示:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

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 刪除所選員工
對於需要刪除的員工數據,我們可以對其進行刪除(框架中的刪除全是邏輯刪除,即打刪除標誌),當前,刪除前提示一下用戶,這樣比較友好一些,如下:

 

SouthEast

代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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;

}

  员工管理后台的一般处理程序如下:

SouthEast

使用RDIFramework.NET 提供的員工管理服務接口,不僅可以實現對員工的增加、修改、刪除、移動,按分頁得到員工數據、按組織機構得到員工列表等,還可以設置員工到用戶的映射關系,直接調用相應的服務接口即可,非常的方便。

延伸阅读

    评论