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

最新推荐文章于 2024-06-25 13:57:59 发布

最新推荐文章于 2024-06-25 13:57:59 发布 · 1.6k 阅读

文章标签：

#jquery #UI #JavaScript #Ajax #grid #ViewUI

jquery 专栏收录该内容

69 篇文章

订阅专栏

本文介绍了一个使用MiniUI实现的单元格编辑功能，包括创建编辑器、执行编辑操作及服务端处理等内容。通过示例代码展示了如何实现单元格的增删改等功能，并提供了完整的保存和同步数据到服务器的方法。

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

[b]一：创建单元格编辑器[/b]
<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>
设置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);
}
}
}