jQuery MiniUI 开发教程 CRUD之：表单编辑（三）

CRUD之：行内表单编辑
[img]http://www.miniui.com/docs/api/images/editform.gif[/img]

参考示例：[url=http://www.miniui.com/demo/datagrid/editform.html]CRUD之：行内表单编辑[/url]

[b]一：创建编辑表单[/b]

员工帐号：		姓名：		薪资：
性别：		年龄：		出生日期：
Update Cancel

[b]二：嵌入详细行[/b]
//显示行详细
grid.hideAllRowDetail();
grid.showRowDetail(row);
//将editForm元素，加入行详细单元格内
var td = grid.getRowDetailCellEl(row);
td.appendChild(editForm);
editForm.style.display = "";

[b]三：加载表单[/b]
var form = new mini.Form("editForm1");
if (grid.isNewRow(row)) {
form.reset();
} else {
form.loading();
$.ajax({
url: "../data/DataService.aspx?method=GetEmployee&id=" + row.id,
success: function (text) {
var o = mini.decode(text);
form.setData(o);

form.unmask();
}
});
}

[b]四：提交表单[/b]
var form = new mini.Form("editForm1");
var o = form.getData();
grid.loading("保存中，请稍后......");
var json = mini.encode([o]);
$.ajax({
url: "../data/DataService.aspx?method=SaveEmployees",
data: { employees: json },
success: function (text) {
grid.reload();
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
}
});