基于Grid快速实现CRUD：单元格编辑.doc

CRUD是：增加(Create)、查询(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写。这四个基本数据操作，涵盖了企业应用系统开发的80%的内容。可以说，解决掉CRUD，也就基本解决了一个项目开发的大部分开发工作。在Web页面中实现表格CRUD，不是一件简单的事，加上“快速”二字，更加不容易。所谓“快速”，一是指代码实现要快；其次，最终实现的用户操作一定要快！如果基于传统Web表单提交的编程方式，用户操作和代码实现的两个“快速”，都无法做到。使用传统技术开发CURD，用户会有如下操作体验：1）查询：用户输入查询条件后，点击按钮，页面开始刷新，然后显示出一个查询结果表格。2）新增：用户点击“新增”按钮，当前页面跳转到“新增页面”，录入信息后，保存提交页面。操作成功后，点击“返回”按钮，返回到查询页面。3）更新：操作同“新增”。4）删除：选择记录后，点击删除按钮，确认删除后，页面刷新，记录被删除。这里的每一个操作，都会发生“页面刷新”的情况，如果网络、服务端、数据库任何一个环节有一点延迟，都将导致“页面空白假死”现象，用户体验很差。同时，由于技术实现的原因，采取了简化界面、拆分功能的做法。将一个完整的功能拆开，由几个页面实现。 在C/S架构下处理一笔业务3分钟内完成，在B/S架构下需要10-15分钟，极大影响了用户操作效率和体验。而对于开发此项业务功能的程序员来说，要处理更多的页面，每个页面都有表单、表格、后台SQL处理、界面生成、表单字段状态维护等，开发工作繁琐、繁重。开发过程中，往往会把界面代码和SQL操作代码混淆在一起，开发效率本来就低下，而后期的维护工作更是艰难。下面我们使用MiniUI的DataGrid，来快速实现一个CURD应用，达到开发快速，用户操作也快速的目标。思路是：后台只提供查询、保存的Ajax服务。前台构建表格后，可以使用单元格编辑，快速新增、删除、修改数据。经过多次编辑后，一次性提交保存到后台。一：创建DataGrid 员工帐号 性别 年龄 出生日期 备注 创建日期 此DataGrid是纯客户端的， 无需服务端支持。DataGrid效果图如下：二：查询记录function search() var key = document.getElementById(key).value; grid.load( key: key );使用load方法，可以传递更多、任意复杂的查询条件。后台通过Requestkey方式获取和处理。三：新增记录function addRow() var newRow = name: New Row ; grid.addRow(newRow, 0);创建新记录时，可以初始化属性，比如newRow.age = 20;四：删除记录function removeRow() var rows = grid.getSelecteds(); if (rows.length 0) grid.removeRows(rows, true); 选择多条记录后，可以一次性删除。五：编辑记录用户可以点击单元格，进行编辑操作。编辑器是在定义列的时候指定的，例如：员工帐号 这里的property声明，此textbox作为列的编辑器对象。五：提交保存在进行多次增加、删除、修改操作后，一次性提交保存到后台。function saveData() var data = grid.getChanges(); var json = mini.encode(data); grid.loading(保存中，请稍后.); $.ajax( url: ./data/AjaxService.aspx?method=SaveChangedEmployees, data: data: json , type: post, success: function (text) grid.reload(); , error: function (jqXHR, textStatus, errorThrown) alert(jqXHR.responseText); ); DataGrid的getChanges方法，可以直接获取增加、删除、修改的记录数据。 数据状态位_state为added/removed/modified。六：查询处理（服务端）当grid调用load方法时，会将查询条件发送到服务端。服务端使用Request对象获得查询条件后，调用业务层方法，返回结果。代码如下：public void SearchEmployees() /查询条件 string key = Requestkey; /分页 int pageIndex = Convert.ToInt32(RequestpageIndex); int pageSize = Convert.ToInt32(RequestpageSize); /字段排序 String sortField = RequestsortField; String sortOrder = RequestsortOrder; /业务层：数据库操作 Hashtable result = new TestDB().SearchEmployees(key, pageIndex, pageSize, sortField, sortOrder); /JSON String json = PluSoft.Utils.JSON.Encode(result); Response.Write(json);经过查询，获得数据后，将数据序列化成JSON字符串，然后用Response返回。六：保存处理（服务端）获得数据后，遍历记录，根据记录的状态位_state，分别进行增加、删除、修改操作。代码如下：public void SaveChangedEmployees() String json = Requestdata; ArrayList rows = (ArrayList)PluSoft.Utils.JSON.Decode(json); foreach (Hashtable row in rows) /根据记录状态，进行不同的增加、删除、修改操作 String state = row_state != null ? row_state.ToString() : ; if(state = added) rowcreatetime = DateTime.Now; new TestDB().InsertEmployee(row); else if (state = removed | state = deleted) String id = rowid.ToString(); new TestDB().DeleteEmployee(id); else if (state = modified) new TestDB().UpdateEmployee(row); 以上就是使用MiniUI的DataGrid开发一个CRUD应用的全部代码。在后台，开发者需要写两个Ajax处理方法，进行纯数据层面的处理。编写后的Ajax数据服务，可以被多个页面进行消费使用。在前端，表格的增加、删除、修改方法是标准统一的，并在内部管理好记录的状态位，提供基于单元格