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

2012-07-02

jquery easyui+ashx+三层框架实现增删改查先说一下背景，最近在学校做一个比赛作品，是一个电子挂号系统。

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

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

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

jquery easyui+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文件的代码：

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

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

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

Test：项目单元测试的代码

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

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

ashx文件的代码：

<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" onclick="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" onclick="addDepartmentInfo()">添加科室</a>                     <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editDepartmentInfo()">编辑科室</a>                     <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="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" onclick="saveInfo()">保存</a>                 <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="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" onclick="saveInfo()">保存</a>                 <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#editDepartmentInfo').dialog('close')">关闭</a>             </div>      </div>

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

下面看一下最后的效果：

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

源代码下载这是源码

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

热点排行

编程

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