MiniUI CRUD

安哥网络

MiniUI CRUD

CRUD包括：查询、编辑、新增、删除等数据操作。

效果图如下：

一：创建DataGrid

首先，我们创建一个数据表格：

1. <div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;"
   
2.     url="../data/AjaxService.aspx?method=SearchEmployees" idField="id"
   
3.     allowResize="true" pageSize="20"
   
4.     allowCellEdit="true" allowCellSelect="true" multiSelect="true"
   
5. >
   
6.     <div property="columns">
   
7.         <div type="checkcolumn"></div>            
   
8.         <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
   
9.             <input property="editor" class="mini-textbox" style="width:100%;"/>
   
10.         </div>               
    
11.         <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别
    
12.             <input property="editor" class="mini-combobox" style="width:100%;" data="Genders"/>               
    
13.         </div>
    
14.         <div field="age" width="100" allowSort="true" >年龄
    
15.             <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/>
    
16.         </div>
    
17.         <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
    
18.             <input property="editor" class="mini-datepicker" style="width:100%;"/>
    
19.         </div>   
    
20.         <div field="remarks" width="120" headerAlign="center" allowSort="true">备注
    
21.             <input property="editor" class="mini-textarea" style="width:100%;" minHeight="80"/>
    
22.         </div>                                 
    
23.         <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
    
24.     </div>
    
25. </div>

复制代码

二：查询记录

1. function search() {
   
2.     var key = document.getElementById("key").value;
   
3.     grid.load({ key: key });
   
4. }

复制代码

使用load方法，可以传递更多、任意复杂的查询条件。后台通过Request["key"]方式获取和处理。

三：新增记录

1. function addRow() {
   
2.     var newRow = { name: "New Row" };
   
3.     grid.addRow(newRow, 0);
   
4. }

复制代码

四：删除记录

1. function removeRow() {
   
2.     var rows = grid.getSelecteds();
   
3.     if (rows.length > 0) {
   
4.         grid.removeRows(rows, true);
   
5.     }
   
6. }

复制代码

选择多条记录后，可以一次性删除。

五：编辑记录

用户可以点击单元格，进行编辑操作。

编辑器是在定义列的时候指定的，例如：

1. <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
   
2.     <input property="editor" class="mini-textbox" style="width:100%;"/>
   
3. </div>  

复制代码

这里的property声明，此textbox作为列的编辑器对象。

五：提交保存

在进行多次增加、删除、修改操作后，一次性提交保存到后台。

1. function saveData() {
   
2.     var data = grid.getChanges();
   
3.     var json = mini.encode(data);
   
4.     grid.loading("保存中，请稍后......");        
   
5.     $.ajax({
   
6.         url: "../data/AjaxService.aspx?method=SaveChangedEmployees",
   
7.         data: { data: json },
   
8.         type: "post",
   
9.         success: function (text) {
   
10.             grid.reload();
    
11.         },
    
12.         error: function (jqXHR, textStatus, errorThrown) {
    
13.             alert(jqXHR.responseText);
    
14.         }
    
15.     });
    
16. }

复制代码

  DataGrid的getChanges方法，可以直接获取增加、删除、修改的记录数据。 数据状态位"_state"为"added"/"removed"/"modified"。

六：查询处理（服务端）

当grid调用load方法时，会将查询条件发送到服务端。服务端使用Request对象获得查询条件后，调用业务层方法，返回结果。代码如下：

1. public void SearchEmployees()
   
2. {
   
3.     //查询条件
   
4.     string key = Request["key"];
   
5.     //分页
   
6.     int pageIndex = Convert.ToInt32(Request["pageIndex"]);
   
7.     int pageSize = Convert.ToInt32(Request["pageSize"]);
   
8.     //字段排序
   
9.     String sortField = Request["sortField"];
   
10.     String sortOrder = Request["sortOrder"];
    
11.     //业务层：数据库操作
    
12.     Hashtable result = new TestDB().SearchEmployees(key, pageIndex, pageSize, sortField, sortOrder);
    
13.     //JSON
    
14.     String json = PluSoft.Utils.JSON.Encode(result);
    
15.     Response.Write(json);
    
16. }

复制代码

经过查询，获得数据后，将数据序列化成JSON字符串，然后用Response返回。

六：保存处理（服务端）

获得数据后，遍历记录，根据记录的状态位"_state"，分别进行增加、删除、修改操作。代码如下：

1. public void SaveChangedEmployees()
   
2. {
   
3.     String json = Request["data"];
   
4.     ArrayList rows = (ArrayList)PluSoft.Utils.JSON.Decode(json);
   
5.     foreach (Hashtable row in rows)
   
6.     {
   
7.         //根据记录状态，进行不同的增加、删除、修改操作
   
8.         String state = row["_state"] != null ? row["_state"].ToString() : "";
   
9.         if(state == "added")
   
10.         {
    
11.             row["createtime"] = DateTime.Now;
    
12.             new TestDB().InsertEmployee(row);
    
13.         }
    
14.         else if (state == "removed" || state == "deleted")
    
15.         {
    
16.             String id = row["id"].ToString();
    
17.             new TestDB().DeleteEmployee(id);
    
18.         }
    
19.         else if (state == "modified")
    
20.         {
    
21.             new TestDB().UpdateEmployee(row);
    
22.         }
    
23.     }
    
24. }

复制代码

MiniUI CRUD
摘自：http://www.miniui.com/docs/quickstart/crud.html