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

時間 2019-11-19

標籤使用 jquery+easyui jquery easyui 進行框架項目開發案例解說之中一個員工管理源代碼分享欄目 JQuery 简体版

原文原文鏈接

使用Jquery+EasyUI 進行框架項目開發案例解說之中的一個javascript

員工管理源代碼分享 php

在開始解說以前，咱們先來看一下什麼是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界面組件取代。css

要了解不少其它的關於EasyUI的信息，可以到它的官網看看，地址爲：html

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

java

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

員工（職員）管理主要是對集團、企事業內部員工進行管理。在後面的章節可以看到有一個用戶管理，這二者有什麼關係呢？員工包括當前企事業單位的所有職員（如保安、保潔員等），這些員工不必定都需要登陸到系統中作對應的業務操做，而用戶則是可以登陸到系統中進行操做的系統使用者。假設某個職員也可以進行登陸，那麼咱們可以沒必要要再爲其加一條用戶信息，可以直接作個映射就能夠把當前員工（職員）映射爲用戶。員工（職員）管理包括員工的新增、編輯、刪除、離職處理、導出、導入員工信息等操做。在框架主界面導航區選擇「員工管理」進入員工管理主界面，例如如下圖所看到的：jquery

可以看到，整個界面除了左側的導航區，右邊的工做區分爲兩部分，樹型組織機構導航與員工的列表展現。功能分爲加入、改動刪除等。如下咱們來看下怎樣實現上面的功能。web

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

<%@ 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.一、載入組織機構樹列表。

$('#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('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) {
		//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 提供的員工管理服務接口，不只可以實現對員工的添加、改動、刪除、移動，按分頁獲得員工數據、按組織機構獲得員工列表等，還可以設置員工到用戶的映射關係，直接調用對應的服務接口就能夠，很是的方便。

二、Jquery EasyUI官方站點

三、Jquery學習官方站點

四、Jquery EasyUI本地實例文件（假設嫌官網速度過慢，可以下載這個看）

五、Jquery權威指南下載

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

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

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

第三部分：交流討論

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

做者： EricHu
出處： http://blog.csdn.net/chinahuyong
Email: 406590790@qq.com
QQ 交流：406590790 QQ羣：16653241
平臺博客：   【CSDN】http://blog.csdn.net/chinahuyong
         【CNBLOGS】http://www.cnblogs.com/huyong
關於做者：高級project師、信息系統項目管理師、DBA。專一於微軟平臺項目架構、管理和企業解決方式，多年項目開發與管理經驗，曾屢次組織並開發多個大型項目，精通DotNet，DB（SqlServer、Oracle等）技術。熟悉Java、Delhpi及Linux操做系統，有紮實的網絡知識。在面向對象、面向服務以及數據庫領域有必定的造詣。現從事DB管理與開發、WinForm、WCF、WebService、網頁數據抓取以及ASP.NET等項目管理、開發、架構等工做。
若有問題或建議，請多多賜教！
本文版權歸做者和CSDN博客共同擁有，歡迎轉載，但未經做者容許必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，若有問題，可以經過郵箱或QQ 聯繫我，很是感謝。