基於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