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
<div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;"
url="../data/AjaxService.aspx?method=SearchEmployees" idField="id"
allowResize="true" pageSize="20"
allowCellEdit="true" allowCellSelect="true" multiSelect="true"
>
<div property="columns">
<div type="checkcolumn"></div>
<div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
<input property="editor" class="mini-textbox" style="width:100%;"/>
</div>
<div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别
<input property="editor" class="mini-combobox" style="width:100%;" data="Genders"/>
</div>
<div field="age" width="100" allowSort="true" >年龄
<input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/>
</div>
<div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
<input property="editor" class="mini-datepicker" style="width:100%;"/>
</div>
<div field="remarks" width="120" headerAlign="center" allowSort="true">备注
<input property="editor" class="mini-textarea" style="width:100%;" minHeight="80"/>
</div>
<div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
</div>
</div>
此DataGrid是纯客户端的，无需服务端支持。DataGrid效果图如下：
二：查询记录
function search() {
var key = document.getElementById("key").value;
grid.load({ key: key });
}
使用load方法，可以传递更多、任意复杂的查询条件。后台通过Request["key"]方式获取和处理。
三：新增记录
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);
}
}
选择多条记录后，可以一次性删除。
五：编辑记录
用户可以点击单元格，进行编辑操作。
编辑器是在定义列的时候指定的，例如：
<div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
<input property="editor" class="mini-textbox" style="width:100%;"/>
</div>
这里的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 = Request["key"];
//分页
int pageIndex = Convert.ToInt32(Request["pageIndex"]);
int pageSize = Convert.ToInt32(Request["pageSize"]);
//字段排序
String sortField = Request["sortField"];
String sortOrder = Request["sortOrder"];
//业务层：数据库操作
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 = Request["data"];
ArrayList rows = (ArrayList)PluSoft.Utils.JSON.Decode(json);
foreach (Hashtable row in rows)
{
//根据记录状态，进行不同的增加、删除、修改操作
String state = row["_state"] != null ? row["_state"].ToString() : "";
if(state == "added")
{
row["createtime"] = DateTime.Now;
new TestDB().InsertEmployee(row);
}
else if (state == "removed" || state == "deleted")
{
String id = row["id"].ToString();
new TestDB().DeleteEmployee(id);
}
else if (state == "modified")
{
new TestDB().UpdateEmployee(row);
}
}
}
以上就是使用MiniUI的DataGrid开发一个CRUD应用的全部代码。
在后台，开发者需要写两个Ajax处理方法，进行纯数据层面的处理。编写后的Ajax数据服务，可以被多个页面进行消费使用。
在前端，表格的增加、删除、修改方法是标准统一的，并在内部管理好记录的状态位，提供基于单元格编辑的快捷操作方式，可以快速实现CRUD。
对于最终用户，进行CRUD操作的时候，页面是不会提交刷新的。在新增、删除、编辑时，跟服务端不会有任何数据交互；仅当查询、保存的时候，会局部刷新表格控件。
