jQuery MiniUI 开发教程 CRUD之：单元格编辑（一）

CRUD之：单元格编辑
[img]http://www.miniui.com/docs/api/images/celledit.png[/img]
参考示例：[url=http://www.miniui.com/demo/datagrid/celledit.html]单元格编辑[/url]

[b]一：创建单元格编辑器[/b]

url="../data/AjaxService.aspx?method=SearchEmployees" idField="id"
allowResize="true" pageSize="20"
allowCellEdit="true" allowCellSelect="true" multiSelect="true">

员工帐号

性别

年龄

出生日期

备注

创建日期

设置allowCellEdit和allowCellSelect后，表格为单元格编辑模式。

[b]二：编辑操作[/b]
增加行：
function addRow() {
var newRow = { name: "New Row" };
grid.addRow(newRow, 0);
}
删除行：
function removeRow() {
var rows = grid.getSelecteds();
if (rows.length > 0) {
grid.removeRows(rows, true);
}
}
保存数据：
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);
}
});
}

[b]三：服务端处理[/b]
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);
}
}
}