使用Jquery+EasyUI进行框架项目开发案例讲解之一_H5之家

首先是员工管理的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>

$('#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 }); } });
$('#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('用户名已存在，请更改用户名。'); 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); } }); }
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; }