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

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操作的时候，页面是不会提交刷新的。在新增、删除、编辑时，跟服务端不会有任何数据交互；仅当查询、保存的时候，会局部刷新表格控件。

如下图所示：

 

总结：

    基于客户端DataGrid组件，能快速开发CURD功能，开发出来的界面，可获得媲美桌面软件用户体验和操作效率。

 

示例参考：http://miniui.com/demo/#src=datagrid/celledit.html