使用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文件，例如以下：
<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.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) {
//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 删除所选员工
对于须要删除的员工数据。我们能够对其进行删除（框架中的删除全是逻辑删除，即打删除标志）。当前，删除前提示一下用户，这样比較友好一些，例如以下：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hpbmFodXlvbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" />