jquery easyui+ashx+三层框架实现增删改查

 先说一下背景, 最近在学校做一个比赛作品,是一个电子挂号系统。因为自己没有接触过医院方面的项目,没有到大医院看过病,也没有亲身体验过网上预约挂号系统的流程。现在对需求还是有很多不明白的地方。需要向大侠请教,如果有哪位园友做过类似的系统,还请加我qq1143314007(请备注 博客园 谢谢)和我交流。因为一些业务不是很清楚,所有数据库设计的还没有设计完整。由于时间紧迫,只能先做一些基础数据的更新了。在这个期间我们做了科室管理的增删改查。因为第一次使用jquery easyui也遇到了不少问题。

先看看这个项目的组织结构吧。


相信有些经验的人看到这个组织架构就知道,是一个基本的三层架构,然后在数据库访问层使用了一个抽象工厂模式来调用DAL。简单的介绍一个这个架构。

FrameWork:包括数据库访问接口,数据访问库,公共代码类,数据访问工厂等基础库

Register.Model:实体库
Register.DBUtility:通用数据库操作类
Register.IDAL:数据库增删改查接口
Register.DALFactory:数据库访问程序集访问工厂类
Register.DAL:数据库增删改查相关操作
Register.Command:公共访问类,比如密码加密解密,邮件发送等基础类
Register.BLL:实现相关业务逻辑库。

Reference:包括使用的第三方的库。

Solution Items:关于项目的说明文件,项目分工,项目进度等文档资料的说明

Test:项目单元测试的代码

WebApplication:系统项目及系统服务.

基本的项目结构就介绍这些,本文主要介绍jquery easyui和ashx以及三层架构的一个整合,下面来介绍主要代码(后面我会附上全部代码以及数据库

ashx文件的代码:

相信有些经验的人看到这个组织架构就知道,是一个基本的三层架构,然后在数据库访问层使用了一个抽象工厂模式来调用DAL。简单的介绍一个这个架构。

FrameWork:包括数据库访问接口,数据访问库,公共代码类,数据访问工厂等基础库

Register.Model:实体库
Register.DBUtility:通用数据库操作类
Register.IDAL:数据库增删改查接口
Register.DALFactory:数据库访问程序集访问工厂类
Register.DAL:数据库增删改查相关操作
Register.Command:公共访问类,比如密码加密解密,邮件发送等基础类
Register.BLL:实现相关业务逻辑库。

Reference:包括使用的第三方的库。

Solution Items:关于项目的说明文件,项目分工,项目进度等文档资料的说明

Test:项目单元测试的代码

WebApplication:系统项目及系统服务.

基本的项目结构就介绍这些,本文主要介绍jquery easyui和ashx以及三层架构的一个整合,下面来介绍主要代码(后面我会附上全部代码以及数据库

ashx文件的代码:

using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using Register.BLL;
 using Register.Model;
 using System.Web.Script.Serialization;
 using RegisterWeb.Manager.SystemUserManager.ashx;
 using System.Text;
 
 namespace RegisterWeb.Manager.HospitalManager.ashx
 {
     /// <summary>
     /// DepartmentsManagerService 的摘要说明
     /// </summary>
     public class DepartmentsManagerService : IHttpHandler
     {
 
         public void ProcessRequest(HttpContext context)
         {
             context.Response.ContentType = "text/plain";
             //context.Response.Write("Hello World");
             String action = context.Request["action"];
 
             //获取科室的全部列表
             if (action.Equals("list"))
             {
                 DepartmentListJSON departmentListJSON = new DepartmentListJSON();
             
 
                 departmentListJSON.rows = new List<DepartmentJSON>();
 
                  int row = int.Parse(context.Request["rows"].ToString());  
                 int page = int.Parse(context.Request["page"].ToString());
 
                 List<DepartmentsInfo> list = DepartmentsBLL.GetPagedDepartmentsInfo(row, page, " Departments_State='1' ");
                 departmentListJSON.total = DepartmentsBLL.GetDepartmentsCount("  Departments_State='1' ");
 
                 foreach (DepartmentsInfo de in list)
                 {
                     string status;
                     if (de.Departments_State.ToString().Equals("1"))
                     {
                         status = "有效";
                     }
                     else
                         status = "无效";
                     departmentListJSON.rows.Add(new DepartmentJSON(de.Departments_ID, (HospitalInfoBLL.GetHospitalInfoByID(de.Hospital_ID)).Hospital_Name, de.Departments_Name, de.Departments_Introduce, de.Departments_AddTime.ToString(), de.Departments_Recoder, status,de.Hospital_ID));
                 }
 
                 JavaScriptSerializer jss = new JavaScriptSerializer();
                 context.Response.Write(jss.Serialize(departmentListJSON));
             }
           //添加科室
             else if (action.Equals("add"))
             {
                 String DepartmentName = context.Request["textDepartmentName"];
                 String DepartmentDes = context.Request["textDepartmentDes"];
                 String selectHosptial = context.Request["selectHosptial"];
                 DepartmentsInfo info = new DepartmentsInfo();
                 info.Departments_ID = DataIDHelper.GetDataID("Departments_ID");
                 info.Departments_Introduce = DepartmentDes;
                 info.Departments_Name = DepartmentName;
                 info.Departments_LastAmendPerson = "admin";
                 info.Departments_Recoder = "admin";
                 info.Departments_LastAmendTime = DateTime.Now;
                 info.Departments_AddTime = DateTime.Now;
                 info.Hospital_ID = selectHosptial;
                 info.Departments_State="1";
 
                 if (DepartmentsBLL.AddDepartments(info))
                 {
                     message msg = new message(true,"该科室添加成功!");
                     JavaScriptSerializer jss = new JavaScriptSerializer();
                     context.Response.Write(jss.Serialize(msg));
                 }
                 else
                 {
                     message msg = new message(false, "该科室添加失败!");
                     JavaScriptSerializer jss = new JavaScriptSerializer();
                     context.Response.Write(jss.Serialize(msg));
                 }
 
             }
                 //删除科室
             else if (action.Equals("delete"))
             {
                 String id = context.Request["id"];
                   DepartmentsInfo info = new DepartmentsInfo();
                 info.Departments_ID=id;
                 if (DepartmentsBLL.DeleteDepartments(info))
                 {
                     context.Response.Write("ok");
                 }
                 else
                 {
                     context.Response.Write("no");
                 }
             }
                 //编辑科室
             else if (action.Equals("edit"))
             {
                 String DepartmentName = context.Request["textDepartmentName"];
                 String DepartmentDes = context.Request["textDepartmentDes"];
                 String selectHosptial = context.Request["selectHosptial"];
                 String id = context.Request["id"];
                 DepartmentsInfo info = new DepartmentsInfo();
                 info.Departments_ID = id;
                 info.Departments_Name = DepartmentName;
                 info.Departments_Introduce = DepartmentDes;
                 info.Hospital_ID = selectHosptial;
                 info.Departments_LastAmendPerson = "admin";
                 info.Departments_LastAmendTime = DateTime.Now;
                 if (DepartmentsBLL.UpdateDepartments(info))
                 {
                     message msg = new message(true, "该科室更新成功!");
                     JavaScriptSerializer jss = new JavaScriptSerializer();
                     context.Response.Write(jss.Serialize(msg));
                 }
                 else
                 {
                     message msg = new message(false, "该科室更新失败!");
                     JavaScriptSerializer jss = new JavaScriptSerializer();
                     context.Response.Write(jss.Serialize(msg));
                 }
             }
                 //查询科室
             else if (action.Equals("search"))
             {
                 string hospName = context.Request["hospName"];
                 string depName = context.Request["depName"];
                 DepartmentListJSON departmentListJSON = new DepartmentListJSON();
                 departmentListJSON.rows = new List<DepartmentJSON>();
 
                 int row = int.Parse(context.Request["rows"].ToString());
                 int page = int.Parse(context.Request["page"].ToString());
 
                 StringBuilder strBuilder = new StringBuilder();
                 strBuilder.Append(" Departments_State='1' ");
                 if (!String.IsNullOrEmpty(depName))
                 {
                     strBuilder.Append(" and Departments_Name=").Append(depName).Append(" ");
                 }
                 if (!String.IsNullOrEmpty(hospName))
                 {
                     strBuilder.Append(" and Hospital_ID='").Append(hospName).Append("' ");
                 }
 
                 List<DepartmentsInfo> list = DepartmentsBLL.GetPagedDepartmentsInfo(row, page, strBuilder.ToString());
                 departmentListJSON.total = DepartmentsBLL.GetDepartmentsCount(strBuilder.ToString());
 
                 foreach (DepartmentsInfo de in list)
                 {
                     string status;
                     if (de.Departments_State.ToString().Equals("1"))
                     {
                         status = "有效";
                     }
                     else
                         status = "无效";
                     departmentListJSON.rows.Add(new DepartmentJSON(de.Departments_ID, (HospitalInfoBLL.GetHospitalInfoByID(de.Hospital_ID)).Hospital_Name, de.Departments_Name, de.Departments_Introduce, de.Departments_AddTime.ToString(), de.Departments_Recoder, status, de.Hospital_ID));
                 }
 
                 JavaScriptSerializer jss = new JavaScriptSerializer();
                 context.Response.Write(jss.Serialize(departmentListJSON));
             }
 
 
         }
 
         public bool IsReusable
         {
             get
             {
                 return false;
             }
         }
     }
 
     class DepartmentListJSON
     {
         public int total { get; set; }
         public List<DepartmentJSON> rows { get; set; }
     }
 
     class DepartmentJSON
     {
         public string ID { get; set; }
         public string Hospital { get; set; }
         public string Name { get; set; }
         public string Introduce { get; set; }
         public string AddTime { get; set; }
         public string Recoder { get; set; }
         public string State { get; set; }
         public string HosptialID { get; set; }
 
         public DepartmentJSON(string ID, string Hospital, string Name, string Introduce, string AddTime, string Recoder, string State, string HospitalID)
         {
             this.ID = ID;
             this.Hospital = Hospital;
             this.Name = Name;
             this.Introduce = Introduce;
             this.AddTime = AddTime;
             this.Recoder = Recoder;
             this.State = State;
             this.HosptialID = HospitalID;
         }
 
     }
 
 }

在ashx文件中,不同的action对应一个前台的增删改查操作。然后执行相应的方法返回json串或者文本信息。

在看一下前台页面的核心jquery ui代码

<script type="text/javascript">
 
         var url; //提交数据的路径
         var formId; //当天要提交的Form的编号
         var dialogId; //对话框的编号
 
         var successCallback = function (result) {
             //result为请求处理后的返回值
             var result = eval('(' + result + ')');
             if (result.success) {
                 $.messager.show({
                     title: 'Success',
                     msg: result.msg
                 });
                 $(dialogId).dialog('close');
                 $('#dg').datagrid('reload');
             } else {
                 $.messager.show({
                     title: 'Error',
                     msg: result.msg
                 });
             }
         }
 
         $(function () {
             //预加载编辑框
             $("#editDepartmentInfo").dialog({
                 "title": "编辑科室信息",
                 width: 500,
                 height: 450,
                 href: 'EditDepartment.aspx'
             });
             $("#editDepartmentInfo").dialog('open').dialog('close');
 
             $('#dg').datagrid({
 
                 onDblClickRow: function (rowIndex, rowData) {
                     $('#editDepartmentInfo').dialog('open');
                     $("#textDepartmentName").val(rowData.Name);
                     $("#textDepartmentDes").val(rowData.Introduce);
                     $("#hoistal").combobox('setValue', rowData.HosptialID);
 
                     //      $('#edit').form('clear');
                     url = 'ashx/DepartmentsManagerService.ashx?action=edit&id=' + rowData.ID;
                     formId = "#edit";
                     dialogId = "#editDepartmentInfo";
                 }
             });
 
         });
         //编辑科室部分
         function editDepartmentInfo() {
             var row = $('#dg').datagrid('getSelected');
             if (row) {
                 $('#editDepartmentInfo').dialog('open');
                 $("#textDepartmentName").val(row.Name);
                 $("#textDepartmentDes").val(row.Introduce);
                 $("#hoistal").combobox('setValue', row.HosptialID);
                 //   $('#edit').form('clear');
 
                 url = 'ashx/DepartmentsManagerService.ashx?action=edit&id=' + row.ID;
                 formId = "#edit";
                 dialogId = "#editDepartmentInfo";
 
             }
             else {
                 $.messager.alert("提示", "您没有选中任何行!");
             }
         }
 
         //添加科室部分
         function addDepartmentInfo() {
             $("#addDepartmentInfo").dialog({
                 "title": "新建科室信息",
                 width: 500,
                 height: 450,
                 href: 'AddDepartment.aspx'
             });
             $('#addDepartmentInfo').dialog('open');
             $('#add').form('clear');
 
             url = 'ashx/DepartmentsManagerService.ashx?action=add';
             formId = "#add";
             dialogId = "#addDepartmentInfo";
         }
         function saveInfo() {
 
             $(formId).form('submit', {
                 url: url,
                 onSubmit: function () {
                     alert(formId);
                     return $(this).form('validate');
                 },
                 success: successCallback
             });
         }
 
         //  删除代码部分
         function deleteAdminUser() {
             var row = $('#dg').datagrid('getSelected');
             if (row) {
                 $.messager.confirm('删除提示', '确定要删除' + row.Name + '吗', function (r) {
                     if (r) {
                         $.post('ashx/DepartmentsManagerService.ashx', { id: row.ID, action: 'delete' }, function (data, status) {
                         
                             if (data == "ok") {
                                 $('#dg').datagrid('reload');
                             } else {
                                 $.messager.show({
                                     title: 'Error',
                                     msg: '删除该科室失败!'
                                 });
                             }
                         });
                     }
                 });
             }
         }
 
         //多条件查询方法
         function tsearch() {
             var hoistalName = $("#hoistalName").combobox("getValue");
             var depName = $("#depName").val();
             alert(depName);
                 $('#dg').datagrid('options').pageNumber = 1;  
                 $('#dg').datagrid('getPager').pagination({pageNumber: 1});
               $('#dg').datagrid('options').url = 'ashx/DepartmentsManagerService.ashx?action=search&hospName='+hoistalName+'&depName='+depName;
               $('#dg').datagrid("reload");
         }
         
     </script>
 
 <div region="center" title="科室信息管理" >
 
     <div  class="easyui-panel" title="查询条件" style="width:850px;height:80px" collapsible="true"
     >
 
     <div class="searchitem">
     <label>医院名:</label>
      <select id="hoistalName" name="selectHosptial">
      </select>
        <script type="text/javascript">
 
            $("#hoistalName").combobox({
                url: "ashx/HospitalInfoService.ashx?action=search",
                valueField: "HosptialItemID",
                textField: "HosptialItemName",
                panelHeight: "auto"
            });
 
      </script>
     </div>
     <div class="searchitem">
     <label>科室名:</label>
     <input type="text" id="depName" class="easyui-validatebox" />
     </div>
     
 <div class="searchitem">
 <a href="#" class="easyui-linkbutton" οnclick="tsearch()" >查询</a>
 </div>
 
     </div>
 
 <table id="dg" title="科室信息管理" class="easyui-datagrid" style="width:850px;height:550px"
             url="ashx/DepartmentsManagerService.ashx?action=list"
             toolbar="#toolbar" pagination="true"
             rownumbers="true" fitColumns="true" singleSelect="true"   idField='ID'
             pageSize="20"
             >
         <thead>
             <tr>
                 <th field="Name" width="50">科室名</th>
                 <th field="Hospital" width="50">所属单位</th>
                 <th field="Introduce" width="50">科室介绍</th>
                 <th field="AddTime" width="50">添加时间</th>
                 <th field="Recoder" width="50">记录人</th>
                 <th field="State" width="50">状态</th>
             </tr>
         </thead>
     </table>
 
     <div id="toolbar" style="padding:5px;height:auto">
                     <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="addDepartmentInfo()">添加科室</a>
                     <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editDepartmentInfo()">编辑科室</a>
                     <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="deleteAdminUser()">删除科室</a>
     </div>
 
 
             <div id="addDepartmentInfo" class="easyui-dialog" closed="true" buttons="#addDepartmentInfo-buttons" style="padding:10px 20px">
             </div>
             <div id="addDepartmentInfo-buttons">
                 <a href="#" class="easyui-linkbutton" iconCls="icon-ok" οnclick="saveInfo()">保存</a>
                 <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#addDepartmentInfo').dialog('close')">关闭</a>
             </div>
 
             <div id="editDepartmentInfo" class="easyui-dialog" closed="true" buttons="#editDepartmentInfo-buttons" style="padding:10px 20px">
             </div>
             <div id="editDepartmentInfo-buttons">
                 <a href="#" class="easyui-linkbutton" iconCls="icon-ok" οnclick="saveInfo()">保存</a>
                 <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#editDepartmentInfo').dialog('close')">关闭</a>
             </div>
 
     </div>

jquery easyui 的具体函数使用方法参考jquery easyui中文api 

下面看一下最后的效果:


源代码下载  这是源码

注:同步于 http://www.cnblogs.com/JerryWang1991/archive/2012/06/29/2570492.html

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Spring Boot和EasyUI是两个常用的Java Web开发框架,Spring Boot提供了一种快速构建生产级Web应用的方式,而EasyUI则是一个轻量级的前端UI库,常用于简化前端开发,特别是表格操作和数据管理。 要使用Spring Boot和EasyUI实现增删(CRUD)操作,你可以按照以下步骤进行: 1. **添加依赖**: - 在Spring Boot项目中,添加EasyUI的依赖到你的pom.xml文件或build.gradle文件中。 - 对于Maven,添加EasyUI UI Grid的依赖: ```xml <dependency> <groupId>com.jeeplus</groupId> <artifactId>easyui</artifactId> <version>1.3.5</version> </dependency> ``` - 或者对于Gradle: ```groovy implementation 'com.jeeplus:easyui:1.3.5' ``` 2. **创建控制器**: 创建一个控制器类,继承自Spring的`RestController`,用来处理HTTP请求。例如: ```java @RestController public class MyController { @Autowired private YourService yourService; // 假设YourService负责数据库操作 @GetMapping("/list") public List<YourEntity> getList() { return yourService.getAll(); } // ...其他方法如@PostMapping("add"), @PutMapping, @DeleteMapping等,对应增删操作 } ``` `YourService`是你自定义的服务类,包含数据库操作的方法。 3. **编写服务接口和实现**: - 定义一个接口,比如`YourService`,包含CRUD方法的声明。 - 实现这个接口,使用JPA、MyBatis或其他ORM工具进行数据库交互。 4. **前端页面**: - 使用EasyUI的`datagrid`组件展示数据列表。在HTML模板中引用EasyUI样式和JS库,并调用后端API获取数据。 - 使用`form`组件来创建表单,处理用户输入的数据,例如: ```html <table id="dg" title="表格"></table> <form id="form" method="post" action="{:U('yourController', 'add')}" enctype="multipart/form-data"> <!-- 表单元素 --> </form> ``` 5. **Ajax调用**: 利用EasyUI提供的内置Ajax功能,处理数据的增删操作。例如,点击按钮时,通过JavaScript发起POST或PUT请求。 6. **错误处理和响应**: 确保后端对每个HTTP操作返回合适的HTTP状态码和JSON响应,前端可以根据这些信息更新界面。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值