jQuery MiniUI 开发教程 表格控件 表格编辑：表单编辑（十二）

阅读更多

CRUD之：行内表单编辑


参考示例： CRUD之：行内表单编辑

一：创建编辑表单

   
   
       
           
           
           
           
           
           
       
       
           
           
           
           
           
           
       
       
                           
       
   

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

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

三：加载表单
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();
        }
    });
}

四：提交表单
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);
    }
});