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

简介: 1.表单回显数据的方法  //方法一 function loadLocal(){ $('#ff').form('load',{ name:'myname', email:'mymail@gmail.

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

 

相关文章
|
1月前
|
JavaScript
EasyUi js 加载数据进下拉框combobox
EasyUi js 加载数据进下拉框combobox
|
1月前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
6月前
|
JavaScript
EasyUI的datagrid每行数据添加操作按钮的方法
EasyUI的datagrid每行数据添加操作按钮的方法
146 0
|
6月前
|
Java
EasyUI的组件加载两次的问题
EasyUI的组件加载两次的问题
|
7月前
|
存储 数据格式
55EasyUI 树形菜单- 树形菜单加载父/子节点
55EasyUI 树形菜单- 树形菜单加载父/子节点
18 0
|
JavaScript 测试技术
Easyui 实现点击不同树节点打开不同tab页展示不同datagrid表数据设计
Easyui 实现点击不同树节点打开不同tab页展示不同datagrid表数据设计
82 0
|
应用服务中间件
EasyUI+JavaWeb奖助学金管理系统[8]-加载角色对应菜单功能实现
本文目录 1. 本章任务 2. 构造测试数据 3. 后端提供查询登录角色对应菜单的接口 4. 后台管理页面加载菜单 5. 测试验证
107 0
EasyUI+JavaWeb奖助学金管理系统[8]-加载角色对应菜单功能实现