?

使用Jquery+EasyUI 進(jìn)行框架項(xiàng)目開發(fā)案例解說之中的一個(gè)

員工管理源代碼分享?

?

在開始解說之前，我們先來看一下什么是Jquery EasyUI？jQuery EasyUI是一組基于jQuery的UI插件集合，而jQuery EasyUI的目標(biāo)就是幫助web開發(fā)人員更輕松的打造出功能豐富而且美觀的UI界面。開發(fā)人員不須要編寫復(fù)雜的javascript，也不須要對(duì)css樣式有深入的了解，開發(fā)人員須要了解的僅僅有一些簡單的html標(biāo)簽。jQuery EasyUI為我們提供了大多數(shù)UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。jQuery EasyUI是基于JQuery的一個(gè)前臺(tái)ui界面的插件，功能相對(duì)沒extjs強(qiáng)大，但頁面也是相當(dāng)好看的。一些功能也足夠開發(fā)人員使用，相對(duì)于extjs更輕量。相對(duì)ExtJs，我更喜歡Easy UI，即是沒有的功能，我們也能夠使用其它替代的UI界面組件取代。

要了解很多其它的關(guān)于EasyUI的信息，能夠到它的官網(wǎng)看看，地址為：

? ? ?http://www.jeasyui.com/index.php

?

第一部分：員工管理源代碼解說

? 員工（職員）管理主要是對(duì)集團(tuán)、企事業(yè)內(nèi)部員工進(jìn)行管理。在后面的章節(jié)能夠看到有一個(gè)用戶管理，這兩者有什么關(guān)系呢？員工包括當(dāng)前企事業(yè)單位的全部職員（如保安、保潔員等），這些員工不一定都須要登錄到系統(tǒng)中做對(duì)應(yīng)的業(yè)務(wù)操作，而用戶則是能夠登錄到系統(tǒng)中進(jìn)行操作的系統(tǒng)使用者。假設(shè)某個(gè)職員也能夠進(jìn)行登錄，那么我們能夠不必要再為其加一條用戶信息，能夠直接做個(gè)映射就可以把當(dāng)前員工（職員）映射為用戶。員工（職員）管理包括員工的新增、編輯、刪除、離職處理、導(dǎo)出、導(dǎo)入員工信息等操作。在框架主界面導(dǎo)航區(qū)選擇“員工管理”進(jìn)入員工管理主界面，例如以下圖所看到的：

?

? 能夠看到，整個(gè)界面除了左側(cè)的導(dǎo)航區(qū)，右邊的工作區(qū)分為兩部分，樹型組織機(jī)構(gòu)導(dǎo)航與員工的列表展示。功能分為加入、改動(dòng)刪除等。以下我們來看下怎樣實(shí)現(xiàn)上面的功能。

首先是員工管理的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="組織機(jī)構(gòu)" 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>

注意，在上面的代碼中，我們要引用界面業(yè)務(wù)邏輯的js文件，例如以下：

<script type="text/javascript" src="../Scripts/Business/StaffAdmin.js?v=5"></script> 員工管理的功能button是依據(jù)當(dāng)前用戶所擁有的權(quán)限進(jìn)行動(dòng)態(tài)設(shè)置其可用性的，也能夠設(shè)置為可見或不可見。如，在上面的aspx界面代碼中有以下這樣一段代碼：

<div id="toolbar"><%=base.BuildToolBarButtons()%> </div>上面這段代碼就是我們綁定button的關(guān)鍵，綁定的button，通過后臺(tái)服務(wù)代碼來實(shí)現(xiàn)，依據(jù)當(dāng)前登錄用戶所擁有的權(quán)限，動(dòng)態(tài)設(shè)置其可用的功能，后臺(tái)代碼例如以下：

在StaffAdmin.js代碼中，員工管理工作區(qū)我們首先要載入左側(cè)的組織機(jī)構(gòu)列表（使用easy ui 的tree控件）與右側(cè)的員工列表（使用easy ui的datagrid控件）。

1.1、載入組織機(jī)構(gòu)樹列表。

$('#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、載入所選組織機(jī)構(gòu)下的員工列表。

載入員工列表，我們是通過選擇對(duì)應(yīng)的組織機(jī)構(gòu)來進(jìn)行載入，這樣不至于一下子把全部的員工數(shù)據(jù)全部載入進(jìn)來，影響頁面的載入效率。選擇一個(gè)組織機(jī)構(gòu)節(jié)點(diǎn)，應(yīng)該能夠載入當(dāng)前所選節(jié)點(diǎn)及其子節(jié)點(diǎn)所擁有的員工列表才對(duì)。當(dāng)然，這也能夠依據(jù)客戶要求進(jìn)行對(duì)應(yīng)的調(diào)整，詳細(xì)實(shí)需求而定。我們要載入所選組織機(jī)構(gòu)下的員工列表，就須要綁定組織機(jī)構(gòu)（Tree控件）的onClick事件或onSelect事件都能夠，這兒我們使用onClick事件，事件使用事比例如以下：

$('#organizeTree').tree({onClick: function(node){alert(node.text); // alert node text property when clicked} }); 在我們的組織機(jī)構(gòu)事中，我們通過單擊對(duì)應(yīng)節(jié)點(diǎn)，載入對(duì)應(yīng)的員工數(shù)據(jù)，代碼例如以下：

onClick: function(node) {var selectedId = node.id; $('#staffGird').datagrid('load', { organizeId: selectedId }); }綁定員工列表的代碼例如以下：

$('#staffGird').datagrid({url: "handler/StaffAdminHandler.ashx",title: "員工（職員）列表",loadMsg: "正在載入員工（職員）數(shù)據(jù)，請(qǐng)稍等...",width: size.width,height: size.height,idField: 'Id',singleSelect: true,striped: true,rownumbers: true,columns: [[{ title: '主鍵', field: 'Id', hidden: true },{ title: '編號(hào)', field: 'Code', width: 100 },{ title: '姓名', field: 'RealName', width: 100 },{ title: '性別', field: 'Gender', width: 35, align: 'center' },{ title: '出生日期', field: 'Birthday', align: "center", width: 90 },{ title: '手機(jī)號(hào)碼', 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);}} });在上面的列綁定代碼中，我們有一個(gè)字段“有效”列，能夠看到依據(jù)當(dāng)前員工有效性，綁定了不同的圖標(biāo)，這兒使用了datagrid列的表格轉(zhuǎn)換函數(shù)“formatter”。對(duì)于的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="禁用" />'; };上面的代碼，我們就完畢了員工管理主頁面的載入綁定。以下我們來看一下，增刪改相關(guān)UI邏輯代碼。

1.3 新增員工信息

新增員工（職員）界面例如以下：

因?yàn)閱T工數(shù)據(jù)列信息較多，我們採用了easyUI Tabs進(jìn)行布局，使得整個(gè)界面比較清晰整潔。同一時(shí)候還使用了combobox、datebox、validatebox等UI控件，例如以下所看到的：

?

詳細(xì)的控件用法能夠查看文章結(jié)尾提供的對(duì)應(yīng)資源。我們來看一下，怎樣綁定combobox控件，因?yàn)槲覀冞@兒有非常多combobox控件的綁定都是提供了RDIFramework.NET框架的數(shù)據(jù)字典部分，因此綁定函數(shù)做成一個(gè)公共的比較好，這樣方便調(diào)用。這些綁定都是在載入界面前進(jìn)行的頁面初始化操作，代碼例如以下：

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});//綁定各數(shù)據(jù)字典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());}綁定數(shù)據(jù)字典的代碼例如以下：

//公共方法 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);//假設(shè)左側(cè)有選中組織機(jī)構(gòu)，則加入的時(shí)候，部門默認(rèn)選中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已存在，請(qǐng)更改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);}}}); }改動(dòng)界面代碼與添加的代碼相似，僅僅只是改動(dòng)界面在彈出時(shí)，要綁定當(dāng)前改動(dòng)的數(shù)據(jù)，綁定方法有非常多種，如：通過用戶選擇的當(dāng)前用戶datagrid當(dāng)前行返回，這樣的對(duì)于字段列不多時(shí)比較適合，但假設(shè)字段比較多， 我們不可能把全部字段都載入到界面上來，一般僅僅是顯示一些比較經(jīng)常使用的字段給用戶，這時(shí)我們能夠通過當(dāng)前所選的行的主鍵值或唯一性來得到待改動(dòng)的數(shù)據(jù)進(jìn)行綁定，我們這兒的員工編輯界面就是採用的后一種方式，代碼例如以下所看到的：

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);} });改動(dòng)后，單擊確定，就可以保存當(dāng)前改動(dòng)的數(shù)據(jù)，例如以下所看到的：

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 刪除所選員工

對(duì)于須要?jiǎng)h除的員工數(shù)據(jù)，我們能夠?qū)ζ溥M(jìn)行刪除（框架中的刪除全是邏輯刪除，即打刪除標(biāo)志），當(dāng)前，刪除前提示一下用戶，這樣比較友好一些，例如以下：

代碼例如以下：

var row = mygrid.selectRow(); if (row != null) {var query = 'action=DeleteStaff&KeyId=' + row.Id;$.messager.confirm('詢問提示', '確定要?jiǎng)h除選中的員工（職員）嗎？', 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('請(qǐng)選擇要?jiǎng)h除的操作權(quán)限項(xiàng)!');return false; }

員工管理后臺(tái)的一般處理程序例如以下：

使用RDIFramework.NET 提供的員工管理服務(wù)接口，不僅能夠?qū)崿F(xiàn)對(duì)員工的添加、改動(dòng)、刪除、移動(dòng)，按分頁得到員工數(shù)據(jù)、按組織機(jī)構(gòu)得到員工列表等，還能夠設(shè)置員工到用戶的映射關(guān)系，直接調(diào)用對(duì)應(yīng)的服務(wù)接口就可以，非常的方便。

?

第二部分：相關(guān)資源分享

?

1、基于.NET的高速信息化系統(tǒng)開發(fā)整合框架 —RDIFramework.NET—系統(tǒng)文件夾

2、Jquery EasyUI官方站點(diǎn)

3、Jquery學(xué)習(xí)官方站點(diǎn)

? 4、Jquery EasyUI本地實(shí)例文件（假設(shè)嫌官網(wǎng)速度過慢，能夠下載這個(gè)看）

5、Jquery權(quán)威指南下載

6、Jquery權(quán)威指南源代碼下載

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

8、JavaScript權(quán)威指南（第六版）中文版（強(qiáng)烈推薦）在線觀看

?

第三部分：交流討論

?歡迎大家交流討論，并提供寶貴意見，假設(shè)認(rèn)為對(duì)你有幫助，請(qǐng)點(diǎn)下推薦，謝謝。

作者：?EricHu?
出處：http://blog.csdn.net/chinahuyong??
Email：406590790@qq.com?
QQ交流：406590790?
QQ群：237326100?
框架博客：http://blog.csdn.net/chinahuyong?
???????????????http://www.cnblogs.com/huyong
RDIFramework.NET，基于.NET的高速信息化系統(tǒng)開發(fā)、整合框架，給用戶和開發(fā)人員最佳的.Net框架部署方案。?
關(guān)于作者：高級(jí)project師、信息系統(tǒng)項(xiàng)目管理師、DBA。專注于微軟平臺(tái)項(xiàng)目架構(gòu)、管理和企業(yè)解決方式，多年項(xiàng)目開發(fā)與管理經(jīng)驗(yàn)，曾多次組織并開發(fā)多個(gè)大型項(xiàng)目，在面向?qū)ο蟆⒚嫦蚍?wù)以及數(shù)據(jù)庫領(lǐng)域有一定的造詣。現(xiàn)主要從事基于?RDIFramework.NET?框架的技術(shù)開發(fā)、咨詢工作，主要服務(wù)于金融、醫(yī)療衛(wèi)生、鐵路、電信、物流、物聯(lián)網(wǎng)、制造、零售等行業(yè)。?
如有問題或建議，請(qǐng)多多賜教！?
本文版權(quán)歸作者和CSDN共同擁有，歡迎轉(zhuǎn)載，但未經(jīng)作者允許必須保留此段聲明，且在文章頁面明顯位置給出原文連接，如有問題，能夠通過郵箱或QQ 聯(lián)系我，非常感謝。

轉(zhuǎn)載于:https://www.cnblogs.com/mfrbuaa/p/4284456.html

總結(jié)

以上是生活随笔為你收集整理的使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。