1.表单回显数据的方法
<script>
//方法一
function loadLocal(){
$('#ff').form('load',{
name:'myname',
email:'mymail@gmail.com',
subject:'subject',
message:'message',
language:'en'
});
}
//方法二
function loadRemote(){
$('#ff').form('load', 'form_data1.json');
}
//清空表单数据
function clearForm(){
$('#ff').form('clear');
}
</script>
2.通常在我们项目中点击编辑按钮,将我们的表单数据进行回显并可以进行编辑(也可以只允许查看)
通常是这样一种机构
<div>
<form>
<table>
<tr> ... </tr>
</table>
</form>
</div>
3.项目中代码示例
<div id="mydialog" title="新增轮播记录" modal="true" draggable="false"
class="easyui-tabs easyui-dialog" closed="true"
style="width: 80%; height: 96%; margin: auto;; display: none;"> <div data-options="title:'轮播记录'">
<form id="myform" action="" method="post"
enctype="multipart/form-data">
<input type="hidden" name="id" value="" />
<table class="formTable" style="width: 600px;">
<tr>
<th>轮播图片名称：</th>
<td><input id="imageName" type="text" name="name"
style="width: 400px;" class="easyui-textbox"
data-options="required:true" /></td>
</tr>
<tr>
<th>轮播图片跳转地址:</th>
<td><input id="url" type="text" name="url"
style="width: 400px;" class="easyui-textbox"
data-options="required:true" /></td>
</tr>
<tr>
<th>循环起始时间:</th>
<td><input id="startTime" type="text" name="startTime"
style="width: 400px;" class="easyui-datetimebox"
data-options="required:true" /></td>
</tr>
<tr>
<th>循环结束时间:</th>
<td><input id="endTime" type="text" name="endTime"
style="width: 400px;" class="easyui-datetimebox"
data-options="required:true" /></td>
</tr>
<tr>
<th>logo图片:</th>
<td><input id="logoFileId" type="file" name="file"
multiple="multiple" style="display: none;"/>
<input type="hidden" name="fileId" value="" /></td>
</tr>
</table><br/>
</form>
</div>
</div>
4.JS文件中的代码
//编辑方法
function getAucDetail(id) {
$.ajax({
type : "POST",
url : parent.baseUrl+"recycle/findRecycleImageById/" + id,
data : null,
dataType : 'json',
success : function(result) {
renderEditForm(result); },
error : function(result) { }
});
};
5.重新load数据
function renderEditForm(data) {
var dlg = $('#mydialog').dialog({
title : '修改轮播图片记录',
buttons : [ {
text : "保存",
handler : function() {
//修改数据方法
updateFormSubmit();
}
}, {
text : "关闭",
handler : function() {
dlg.dialog('close');
}
} ]
});
$('#myform').form('load', { // 调用load方法把所选中的数据load到表单中,非常方便
id:data.id,
name : data.name,
url : data.url,
startTime : data.startTime,
endTime : data.endTime,
fileId:data.fileId
});
// render图片
if (data.fileId == null || data.fileId == '') {
$(".imgRender").remove();
$(".imgUploader").show();
} else {
renderImages("logoFileId", data.fileId);
}
$('#mydialog').dialog('open'); // 打开窗口
}
6.这里load方法的KEY是html文件的name属性值
7.修改表单数据提交方法
function updateFormSubmit() {
if ($('#myform').form('validate')) {
$.ajax({
type : "POST",
url : parent.baseUrl+'recycle/update',
data : $('#myform').serialize(),
dataType : 'json',
success : function(result) {
$('#mydialog').dialog('close');
$('#t_webImage').datagrid('reload');
$('#t_webImage').datagrid('unselectAll');
$.messager.show({
title : '提示信息!',
msg : '操作成功!'
});
},
error : function(result) {
}
});
}else{
alert("请先将轮播图片记录的必填详细信息填写完整");
}
}