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

Posted 2020-08-24 Mr_伍先生

1.表单回显数据的方法

<script>　　
//方法一

        function loadLocal(){
            $(‘#ff‘).form(‘load‘,{
                name:‘myname‘,
                email:‘[email protected]‘,
                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("请先将轮播图片记录的必填详细信息填写完整");
    }
}