使用JqueryEasyUI 进行框架项目开发案例讲解之一用户管理源码分享.docVIP

　　在开始讲解之前，我们先来看一下什么是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界面组件代替。　第一部分：员工管理源码讲解　　 　　员工（职员）管理主要是对集团、企事业内部员工进行管理。在4.5章节可以看到有一个用户管理，这两者有什么关系呢？员工包含当前企事业单位的所有职员（如保安、保洁员等），这些员工不一定都需要登录到系统中做相应的业务操作，而用户则是可以登录到系统中进行操作的系统使用者。如果某个职员也可以进行登录，那么我们可以不必要再为其加一条用户信息，可以直接做个映射即可把当前员工（职员）映射为用户。员工（职员）管理包括员工的新增、编辑、删除、离职处理、导出、导入员工信息等操作。在框架主界面导航区选择“员工管理”进入员工管理主界面，如下图所示： ? ? 　 可以看到，整个界面除了左侧的导航区，右边的工作区分为两部分，树型组织机构导航与员工的列表展示。功能分为添加、修改删除等。下面我们来看下如何实现上面的功能。 　　首先是员工管理的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/Staff