首页 > 代码库 > easyUi load方法重新加载表单的数据

easyUi load方法重新加载表单的数据

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

 

easyUi load方法重新加载表单的数据