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("请先将轮播图片记录的必填详细信息填写完整"); } }