當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享

發布時間：2025/3/20 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了使用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文件，例如以下：

<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);}}}); }改動界面代碼與添加的代碼相似，僅僅只是改動界面在彈出時，要綁定當前改動的數據，綁定方法有非常多種，如：通過用戶選擇的當前用戶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 刪除所選員工

對于須要刪除的員工數據，我們能夠對其進行刪除（框架中的刪除全是邏輯刪除，即打刪除標志），當前，刪除前提示一下用戶，這樣比較友好一些，例如以下：

代碼例如以下：

員工管理后臺的一般處理程序例如以下：

使用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權威指南（第六版）中文版（強烈推薦）在線觀看

第三部分：交流討論

?歡迎大家交流討論，并提供寶貴意見，假設認為對你有幫助，請點下推薦，謝謝。

作者：?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的高速信息化系統開發、整合框架，給用戶和開發人員最佳的.Net框架部署方案。?
關于作者：高級project師、信息系統項目管理師、DBA。專注于微軟平臺項目架構、管理和企業解決方式，多年項目開發與管理經驗，曾多次組織并開發多個大型項目，在面向對象、面向服務以及數據庫領域有一定的造詣。現主要從事基于?RDIFramework.NET?框架的技術開發、咨詢工作，主要服務于金融、醫療衛生、鐵路、電信、物流、物聯網、制造、零售等行業。?
如有問題或建議，請多多賜教！?
本文版權歸作者和CSDN共同擁有，歡迎轉載，但未經作者允許必須保留此段聲明，且在文章頁面明顯位置給出原文連接，如有問題，能夠通過郵箱或QQ 聯系我，非常感謝。

轉載于:https://www.cnblogs.com/mfrbuaa/p/4284456.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： XML基础概念
下一篇： Unity3D shaderLab