jQuery MiniUI 开发教程 CRUD之:表单编辑(三)
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);
}
});