【推荐】使用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的信息，可以到它的官网看看，地址为：

<a href="http://www.jeasyui.com/index.php" target="_blank">http://www.jeasyui.com/index.php</a>

　　第一部分：员工管理源码讲解

　员工（职员）管理主要是对集团、企事业内部员工进行管理。在4.5章节可以看到有一个用户管理，这两者有什么关系呢？员工包含当前企事业单位的所有职员（如保安、保洁员等），这些员工不一定都需要登录到系统中做相应的业务操作，而用户则是可以登录到系统中进行操作的系统使用者。如果某个职员也可以进行登录，那么我们可以不必要再为其加一条用户信息，可以直接做个映射即可把当前员工（职员）映射为用户。员工（职员）管理包括员工的新增、编辑、删除、离职处理、导出、导入员工信息等操作。在框架主界面导航区选择“员工管理”进入员工管理主界面，如下图所示：

【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

　可以看到，整个界面除了左侧的导航区，右边的工作区分为两部分，树型组织机构导航与员工的列表展示。功能分为添加、修改删除等。下面我们来看下如何实现上面的功能。

　　首先是员工管理的UI界面aspx代码如下：　　

<code><</code><code>asp:Content</code> <code>ID</code><code>=</code><code>"Content1"</code> <code>ContentPlaceHolderID</code><code>=</code><code>"head"</code> <code>runat</code><code>=</code><code>"server"</code><code>></code>

<code><</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>></code>

<code> </code><code>div#navigation{background:white}</code>

<code> </code><code>div#wrapper{float:right;width:100%;margin-left:-185px}</code>

<code> </code><code>div#content{margin-left:185px}</code>

<code> </code><code>div#navigation{float:left;width:180px}</code>

<code></</code><code>style</code><code>></code>

<code></</code><code>asp:Content</code><code>></code>

<code><</code><code>asp:Content</code> <code>ID</code><code>=</code><code>"Content2"</code> <code>ContentPlaceHolderID</code><code>=</code><code>"ContentPlaceHolder1"</code> <code>runat</code><code>=</code><code>"server"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>id</code><code>=</code><code>"layout"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>region</code><code>=</code><code>"west"</code> <code>iconCls</code><code>=</code><code>"icon-chart_organisation"</code> <code>split</code><code>=</code><code>"true"</code> <code>title</code><code>=</code><code>"组织机构"</code> <code>style</code><code>=</code><code>"width:220px;padding: 5px"</code> <code>collapsible</code><code>=</code><code>"false"</code><code>></code>

<code> </code><code><</code><code>ul</code> <code>id</code><code>=</code><code>"organizeTree"</code><code>></</code><code>ul</code><code>></code>

<code> </code><code><</code><code>div</code> <code>region</code><code>=</code><code>"center"</code> <code>title</code><code>=</code><code>"员工管理"</code> <code>iconCls</code><code>=</code><code>"icon-users"</code> <code>style</code><code>=</code><code>"padding: 2px; overflow: hidden"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>id</code><code>=</code><code>"toolbar"</code><code>></code>

<code> </code><code><</code><code>table</code> <code>id</code><code>=</code><code>"staffGird"</code> <code>toolbar</code><code>=</code><code>"#toolbar"</code><code>></</code><code>table</code><code>></code>

<code> </code><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"../Scripts/Business/StaffAdmin.js?v=5"</code><code>></</code><code>script</code><code>></code>

<code><script type=</code><code>"text/javascript"</code> <code>src=</code><code>"../Scripts/Business/StaffAdmin.js?v=5"</code><code>></script></code>

<code><div id=</code><code>"toolbar"</code><code>><%=base.BuildToolBarButtons()%></div></code>

在StaffAdmin.js代码中，员工管理工作区我们首先要加载左侧的组织机构列表（使用easy ui 的tree控件）与右侧的员工列表（使用easy ui的datagrid控件）。

1.1、加载组织机构树列表。

<code>$(</code><code>'#organizeTree'</code><code>).tree({</code>

<code> </code><code>lines: </code><code>true</code><code>,</code>

<code> </code><code>url: </code><code>'handler/OrganizeAdminHander.ashx?action=treedata'</code><code>,</code>

<code> </code><code>animate: </code><code>true</code><code>,</code>

<code> </code><code>onLoadSuccess:</code><code>function</code><code>(node,data) {</code>

<code> </code><code>$(</code><code>'body'</code><code>).data(</code><code>'depData'</code><code>, data);</code>

<code> </code><code>},onClick: </code><code>function</code><code>(node) {</code>

<code> </code><code>var</code> <code>selectedId = node.id; </code>

<code> </code><code>$(</code><code>'#staffGird'</code><code>).datagrid(</code><code>'load'</code><code>, { organizeId: selectedId });</code>

加载员工列表，我们是通过选择相应的组织机构来进行加载，这样不至于一下子把所有的员工数据全部加载进来，影响页面的加载效率。选择一个组织机构节点，应该可以加载当前所选节点及其子节点所拥有的员工列表才对。当然，这也可以根据客户要求进行相应的调整，具体实需求而定。我们要加载所选组织机构下的员工列表，就需要绑定组织机构（Tree控件）的onClick事件或onSelect事件都可以，这儿我们使用onClick事件，事件使用事例如下：

<code> </code><code>onClick: </code><code>function</code><code>(node){</code>

<code> </code><code>alert(node.text); </code><code>// alert node text property when clicked</code>

<code>onClick: </code><code>function</code><code>(node) {</code>

<code>$(</code><code>'#staffGird'</code><code>).datagrid({</code>

<code> </code><code>url: </code><code>"handler/StaffAdminHandler.ashx"</code><code>,</code>

<code> </code><code>title: </code><code>"员工（职员）列表"</code><code>,</code>

<code> </code><code>loadMsg: </code><code>"正在加载员工（职员）数据，请稍等..."</code><code>,</code>

<code> </code><code>width: size.width,</code>

<code> </code><code>height: size.height,</code>

<code> </code><code>idField: </code><code>'Id'</code><code>,</code>

<code> </code><code>singleSelect: </code><code>true</code><code>,</code>

<code> </code><code>striped: </code><code>true</code><code>,</code>

<code> </code><code>rownumbers: </code><code>true</code><code>,</code>

<code> </code><code>columns: [[</code>

<code> </code><code>{ title: </code><code>'主键'</code><code>, field: </code><code>'Id'</code><code>, hidden: </code><code>true</code> <code>},</code>

<code> </code><code>{ title: </code><code>'编号'</code><code>, field: </code><code>'Code'</code><code>, width: 100 },</code>

<code> </code><code>{ title: </code><code>'姓名'</code><code>, field: </code><code>'RealName'</code><code>, width: 100 },</code>

<code> </code><code>{ title: </code><code>'性别'</code><code>, field: </code><code>'Gender'</code><code>, width: 35, align: </code><code>'center'</code> <code>},</code>

<code> </code><code>{ title: </code><code>'出生日期'</code><code>, field: </code><code>'Birthday'</code><code>, align: </code><code>"center"</code><code>, width: 90 },</code>

<code> </code><code>{ title: </code><code>'手机号码'</code><code>, field: </code><code>'Mobile'</code><code>, width: 120 },</code>

<code> </code><code>{ title: </code><code>'办公电话'</code><code>, field: </code><code>'OfficePhone'</code><code>, width: 120 },</code>

<code> </code><code>{ title: </code><code>'邮箱地址'</code><code>, field: </code><code>'Email'</code><code>, width: 150 },</code>

<code> </code><code>{ title: </code><code>'有效'</code><code>, field: </code><code>'Enabled'</code><code>, width: 50, align: </code><code>'center'</code><code>, formatter: imgcheckbox },</code>

<code> </code><code>{ title: </code><code>'描述'</code><code>, field: </code><code>'Description'</code><code>, width: 260 },</code>

<code> </code><code>{ title: </code><code>'UserId'</code><code>, field: </code><code>'UserId'</code><code>, hidden: </code><code>true</code> <code>}</code>

<code> </code><code>rowStyler: </code><code>function</code> <code>(index, row, css) {</code>

<code> </code><code>if</code> <code>(row.UserId != </code><code>""</code><code>) {</code>

<code> </code><code>return</code> <code>'font-weight:bold;'</code><code>;</code>

<code> </code><code>onLoadSuccess: </code><code>function</code> <code>(data) {</code>

<code> </code><code>if</code> <code>(data.rows.length > 0) {</code>

<code> </code><code>$(</code><code>'#staffGird'</code><code>).datagrid(</code><code>"selectRow"</code><code>, 0);</code>

<code>var</code> <code>imgcheckbox = </code><code>function</code> <code>(cellvalue, options, rowObject) {</code>

<code> </code><code>return</code> <code>cellvalue ? </code><code>'<img src="/css/icon/ok.png" alt="正常" title="正常" />'</code> <code>: </code><code>'<img src="/css/icon/stop.png" alt="禁用" title="禁用" />'</code><code>;</code>

1.3 新增员工信息

新增员工（职员）界面如下：

由于员工数据列信息较多，我们采用了easyUI Tabs进行布局，使得整个界面比较清晰整洁。同时还使用了combobox、datebox、validatebox等UI控件，如下所示：

具体的控件使用方法可以查看文章结尾提供的相应资源。我们来看一下，如何绑定combobox控件，由于我们这儿有很多combobox控件的绑定都是提供了RDIFramework.NET框架的数据字典部分，因此绑定函数做成一个公共的比较好，这样方便调用。这些绑定都是在加载界面前进行的页面初始化操作，代码如下：

<code>initData: </code><code>function</code> <code>(organizeId) {</code>

<code> </code><code>top.$(</code><code>'#txt_Education,#txt_Degree,#txt_Title,#txt_TitleLevel,#txt_WorkingProperty,#txt_Party,#txt_Gender'</code><code>).combobox({ panelHeight: </code><code>'auto'</code> <code>});</code>

<code> </code><code>top.$(</code><code>'#txt_Birthday,#txt_TitleDate,#txt_WorkingDate,#txt_DimissionDate,#txt_JoinInDate'</code><code>).datebox({</code>

<code> </code><code>formatter: </code><code>function</code> <code>(date) {</code>

<code> </code><code>return</code> <code>date.getFullYear() + </code><code>'-'</code> <code>+ (date.getMonth() + 1) + </code><code>'-'</code> <code>+ date.getDate();</code>

<code> </code><code>arser: </code><code>function</code> <code>(date) {</code>

<code> </code><code>return</code> <code>new</code> <code>Date(Date.parse(date.replace(/-/g, </code><code>"/"</code><code>)));</code>

<code> </code><code>var</code> <code>_organizeId = organizeId || 0;</code>

<code> </code><code>top.$(</code><code>'#txt_OrganizeId'</code><code>).combotree({</code>

<code> </code><code>data: organizeTree.data(),</code>

<code> </code><code>valueField: </code><code>'id'</code><code>,</code>

<code> </code><code>textField: </code><code>'text'</code><code>,</code>

<code> </code><code>value: _organizeId</code>

<code> </code><code>//绑定各数据字典</code>

<code> </code><code>pubMethod.bindCategory(</code><code>'txt_Gender'</code><code>, </code><code>'Gender'</code><code>);</code>

<code> </code><code>pubMethod.bindCategory(</code><code>'txt_Education'</code><code>, </code><code>'Education'</code><code>);</code>

<code> </code><code>pubMethod.bindCategory(</code><code>'txt_WorkingProperty'</code><code>, </code><code>'WorkingProperty'</code><code>);</code>

<code> </code><code>pubMethod.bindCategory(</code><code>'txt_Degree'</code><code>, </code><code>'Degree'</code><code>);</code>

<code> </code><code>pubMethod.bindCategory(</code><code>'txt_Title'</code><code>, </code><code>'Title'</code><code>);</code>

<code> </code><code>pubMethod.bindCategory(</code><code>'txt_TitleLevel'</code><code>, </code><code>'TitleLevel'</code><code>);</code>

<code> </code><code>pubMethod.bindCategory(</code><code>'txt_Nationality'</code><code>, </code><code>'Nationality'</code><code>);</code>

<code> </code><code>pubMethod.bindCategory(</code><code>'txt_Party'</code><code>, </code><code>'PoliticalStatus'</code><code>)</code>

<code> </code><code>top.$(</code><code>'#staffTab'</code><code>).tabs({</code>

<code> </code><code>onSelect: </code><code>function</code> <code>() {</code>

<code> </code><code>top.$(</code><code>'.validatebox-tip'</code><code>).remove();</code>

<code> </code><code>top.$(</code><code>'#txt_passSalt'</code><code>).val(randomString());</code>

绑定数据字典的代码如下：

<code>var</code> <code>pubMethod = {</code>

<code> </code><code>bindCategory: </code><code>function</code> <code>(categoryControl,categoryCode) {</code>

<code> </code><code>if</code> <code>(categoryControl == </code><code>''</code><code>|| categoryCode == </code><code>''</code><code>)</code>

<code> </code><code>return</code><code>;</code>

<code> </code><code>top.$(</code><code>'#'</code><code>+ categoryControl).combobox({</code>

<code> </code><code>url: </code><code>'Modules/handler/DataItemAdminHandler.ashx?action=GetCategory&categorycode='</code> <code>+ categoryCode,</code>

<code> </code><code>method: </code><code>'get'</code><code>,</code>

<code> </code><code>valueField: </code><code>'ItemValue'</code><code>,</code>

<code> </code><code>textField: </code><code>'ItemName'</code><code>,</code>

<code> </code><code>editable: </code><code>false</code><code>,</code>

<code> </code><code>panelHeight: </code><code>'auto'</code>

新增员工的代码如下：

<code>var</code> <code>actionUrl = </code><code>'handler/StaffAdminHandler.ashx'</code><code>;</code>

<code>var</code> <code>formUrl = </code><code>"Modules/html/StaffForm.htm"</code><code>;</code>

<code>AddStaff: </code><code>function</code> <code>() { </code><code>//增加员工（职员）</code>

<code> </code><code>if</code> <code>($(</code><code>this</code><code>).linkbutton(</code><code>'options'</code><code>).disabled == </code><code>true</code><code>) {</code>

<code> </code><code>return</code><code>;</code>

<code> </code><code>//功能代码逻辑...</code>

<code> </code><code>var</code> <code>addDialog = top.$.hDialog({</code>

<code> </code><code>href: formUrl + </code><code>'?v='</code> <code>+ Math.random(),</code>

<code> </code><code>width: 680,</code>

<code> </code><code>height: 500,</code>

<code> </code><code>title: </code><code>'新增员工（职员）'</code><code>,</code>

<code> </code><code>iconCls: </code><code>'icon-vcard_add'</code><code>,</code>

<code> </code><code>onLoad: </code><code>function</code> <code>() {</code>

<code> </code><code>var</code> <code>dep = $(</code><code>'#organizeTree'</code><code>).tree(</code><code>'getSelected'</code><code>);</code>

<code> </code><code>var</code> <code>depID = 0;</code>

<code> </code><code>depID = dep.id || 0;</code>

<code> </code><code>top.$(</code><code>'#chk_Enabled'</code><code>).attr(</code><code>"checked"</code><code>, </code><code>true</code><code>);</code>

<code> </code><code>//如果左侧有选中组织机构，则添加的时候，部门默认选中</code>

<code> </code><code>StaffAdminMethod.initData(depID);</code>

<code> </code><code>closed: </code><code>false</code><code>,</code>

<code> </code><code>submit: </code><code>function</code> <code>() {</code>

<code> </code><code>var</code> <code>tab = top.$(</code><code>'#staffTab'</code><code>).tabs(</code><code>'getSelected'</code><code>);</code>

<code> </code><code>var</code> <code>index = top.$(</code><code>'#staffTab'</code><code>).tabs(</code><code>'getTabIndex'</code><code>, tab);</code>

<code> </code><code>if</code> <code>(top.$(</code><code>'#uiform'</code><code>).form(</code><code>'validate'</code><code>)) {</code>

<code> </code><code>//var query = createParam('add', 0) + '&roles=' + top.$('#txt_role').combo('getValues');</code>

<code> </code><code>var</code> <code>vOrganizeId = top.$(</code><code>'#txt_OrganizeId'</code><code>).combobox(</code><code>'getValue'</code><code>);</code>

<code> </code><code>var</code> <code>query = </code><code>'action=AddStaff&vOrganizeId='</code> <code>+ vOrganizeId + </code><code>'&'</code> <code>+ top.$(</code><code>'#uiform'</code><code>).serialize();</code>

<code> </code><code>$.ajaxjson(actionUrl, query, </code><code>function</code> <code>(d) {</code>

<code> </code><code>if</code> <code>(d.Success) {</code>

<code> </code><code>mygrid.reload();</code>

<code> </code><code>addDialog.dialog(</code><code>'close'</code><code>);</code>

<code> </code><code>msg.error(</code><code>'用户名已存在，请更改用户名。'</code><code>);</code>

<code> </code><code>if</code> <code>(index > 0)</code>

<code> </code><code>top.$(</code><code>'#staffTab'</code><code>).tabs(</code><code>'select'</code><code>, 0);</code>

<code> </code><code>top.$(</code><code>'#txt_username'</code><code>).select();</code>

<code> </code><code>MessageOrRedirect(d);</code>

<code> </code><code>if</code> <code>(index > 0)</code>

<code> </code><code>top.$(</code><code>'#staffTab'</code><code>).tabs(</code><code>'select'</code><code>, 0);</code>

<code>var</code> <code>parm = </code><code>'action=GetEntity&KeyId='</code> <code>+ row.Id;</code>

<code>$.ajaxjson(actionUrl, parm, </code><code>function</code> <code>(data) {</code>

<code> </code><code>//OrganizeId</code>

<code> </code><code>top.$(</code><code>'#txt_RealName'</code><code>).val(data.RealName);</code>

<code> </code><code>top.$(</code><code>'#txt_Birthday'</code><code>).datebox(</code><code>'setValue'</code><code>, data.Birthday);</code>

<code> </code><code>top.$(</code><code>'#txt_Gender'</code><code>).combobox(</code><code>'setValue'</code><code>, data.Gender);</code>

<code> </code><code>top.$(</code><code>'#txt_Major'</code><code>).val(data.Major);</code>

<code> </code><code>top.$(</code><code>'#txt_School'</code><code>).val(data.School);</code>

<code> </code><code>top.$(</code><code>'#txt_Education'</code><code>).combobox(</code><code>'setValue'</code><code>, data.Education);</code>

<code> </code><code>top.$(</code><code>'#txt_Degree'</code><code>).combobox(</code><code>'setValue'</code><code>, data.Degree);</code>

<code> </code><code>top.$(</code><code>'#txt_Title'</code><code>).combobox(</code><code>'setValue'</code><code>, data.Title);</code>

<code> </code><code>top.$(</code><code>'#txt_TitleLevel'</code><code>).combobox(</code><code>'setValue'</code><code>, data.TitleLevel);</code>

<code> </code><code>top.$(</code><code>'#txt_TitleDate'</code><code>).datebox(</code><code>'setValue'</code><code>, data.TitleDate);</code>

<code> </code><code>/*省略部分代码...*/</code>

<code> </code><code>top.$(</code><code>'#chk_Enabled'</code><code>).attr(</code><code>'checked'</code><code>,data.Enabled == </code><code>"1"</code><code>);</code>

<code> </code><code>top.$(</code><code>'#txt_Description'</code><code>).val(data.Description);</code>

<code>if</code> <code>(top.$(</code><code>'#uiform'</code><code>).validate().form()) {</code>

<code> </code><code>var</code> <code>vOrganizeId = top.$(</code><code>'#txt_OrganizeId'</code><code>).combobox(</code><code>'getValue'</code><code>);</code>

<code> </code><code>var</code> <code>query = </code><code>'action=EditStaff&vOrganizeId='</code> <code>+ vOrganizeId + </code><code>'&KeyId='</code> <code>+ row.Id + </code><code>'&'</code> <code>+ top.$(</code><code>'#uiform'</code><code>).serialize();</code>

<code> </code><code>$.ajaxjson(actionUrl, query, </code><code>function</code> <code>(d) {</code>

<code> </code><code>if</code> <code>(d.Success) {</code>

<code> </code><code>msg.ok(d.Message);</code>

<code> </code><code>editDailog.dialog(</code><code>'close'</code><code>);</code>

<code> </code><code>mygrid.reload();</code>

<code> </code><code>MessageOrRedirect(d);</code>

对于需要删除的员工数据，我们可以对其进行删除（框架中的删除全是逻辑删除，即打删除标志），当前，删除前提示一下用户，这样比较友好一些，如下：

代码如下：

<code>var</code> <code>row = mygrid.selectRow();</code>

<code> </code><code>var</code> <code>query = </code><code>'action=DeleteStaff&KeyId='</code> <code>+ row.Id;</code>

<code> </code><code>$.messager.confirm(</code><code>'询问提示'</code><code>, </code><code>'确定要删除选中的员工（职员）吗？'</code><code>, </code><code>function</code> <code>(data) {</code>

<code> </code><code>$.ajaxjson(actionUrl, query, </code><code>function</code> <code>(d) {</code>

<code> </code><code>if</code> <code>(d.Success) {</code>

<code> </code><code>msg.ok(d.Message);</code>

<code> </code><code>mygrid.reload();</code>

<code> </code><code>MessageOrRedirect(d);</code>

<code> </code><code>return</code> <code>false</code><code>;</code>

<code> </code><code>msg.warning(</code><code>'请选择要删除的操作权限项!'</code><code>);</code>

<code> </code><code>return</code> <code>false</code><code>;</code>

　使用RDIFramework.NET 提供的员工管理服务接口，不仅可以实现对员工的增加、修改、删除、移动，按分页得到员工数据、按组织机构得到员工列表等，还可以设置员工到用户的映射关系，直接调用相应的服务接口即可，非常的方便。

本文转自yonghu86 51CTO博客，原文链接：http://blog.51cto.com/yonghu/1321306，如需转载请自行联系原作者

【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条