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

CRUD之：行内表单编辑

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

一：创建编辑表单

<divid="editForm1"style="display:none;padding:5px;position:relative;">

<inputclass="mini-hidden"name="id"/>

<tablestyle="width:100%;">

<tr>

<tdstyle="width:80px;">员工帐号：</td>

<tdstyle="width:150px;"><inputname="loginname"class="mini-textbox"/></td>

<tdstyle="width:80px;">姓名：</td>

<tdstyle="width:150px;"><inputname="name"class="mini-textbox"/></td>

<tdstyle="width:80px;">薪资：</td>

<tdstyle="width:150px;"><inputname="salary"class="mini-textbox"/></td>

</tr>

<tr>

<td>性别：</td>

<td><inputname="gender"class="mini-combobox"data="Genders"/></td>

<td>年龄：</td>

<td><inputname="age"class="mini-spinner"minValue="0"maxValue="200"value="25"/></td>

<td>出生日期：</td>

<td><inputname="birthday"class="mini-datepicker"/></td>

</tr>

<tr>

<tdstyle="text-align:right;padding-top:5px;padding-right:20px;"colspan="6">

<aclass="Update_Button"href="javascript:updateRow();">Update</a>

<aclass="Cancel_Button"href="javascript:cancelRow();">Cancel</a>

</td>

</tr>

</table>

</div>

二：嵌入详细行

//显示行详细

grid.hideAllRowDetail();

grid.showRowDetail(row);

//将editForm元素，加入行详细单元格内

vartd=grid.getRowDetailCellEl(row);

td.appendChild(editForm);

editForm.style.display="";

三：加载表单

varform=newmini.Form("editForm1");

if(grid.isNewRow(row)){

form.reset();

}else{

form.loading();

$.ajax({

url:"../data/DataService.aspx?method=GetEmployee&id="+row.id,

success:function(text){

varo=mini.decode(text);

form.setData(o);

form.unmask();

}

});

}

四：提交表单

varform=newmini.Form("editForm1");

varo=form.getData();

grid.loading("保存中，请稍后......");

varjson=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);

}

});