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("請先將輪播圖片記錄的必填詳細信息填寫完整");
    }
}