基于EasyUI实现自动填充Form内的部分输入框

最新推荐文章于 2022-05-07 21:17:48 发布

原创最新推荐文章于 2022-05-07 21:17:48 发布 · 4.1k 阅读

1 ·

CC 4.0 BY-SA版权

未经本人同意，禁止复制文章内容

文章标签：

#EasyUI #填充 #Form

EasyUI 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种针对EasyUI框架表单组件的扩展方法，通过新增setValues方法实现批量填充表单输入框的功能。该方法接收数据对象及待填充输入框ID列表作为参数，并能根据指定的数据项自动填充对应的表单元素。

因项目需要根据获得的数据对对话框的Form内部分输入框填充，而默认的EasyUI并不支持该方式，故对其进行了扩展，代码如下：

$.extend($.fn.form.methods, {
    setValues: function (myself, data) {
        var form = $(myself);
        
        var opts = $.data(form[0], "form").options;
        
        var cols = "," + data.items + ",";
        for (var name in data.row) {
            if (cols.indexOf(name) >= 0) {
                var val = data.row[name];                
                form.find("[id=\"" + name + "\"]").textbox("setValue",val);
            }
        }
        
        opts.onLoadSuccess.call(form, data);
        form.form("validate");
    }
});

上述代码对EasyUI的Form对象增加了setValues方法。调用上述代码的示例如下：

function reply() {
    var row = $('#feedbackGrid').datagrid('getSelected');
    if (row) {
        $('#feedbackDlg').dialog('open').dialog('setTitle', '反馈回复');
        var obj = {};
        obj.row = row;
        obj.items = "nickName,userId";

        $('#fm').form('setValues', obj);
        url = 'feedback/reply';
    }
}

在调用setValues的时候，传入的参数包含两个属性，一个是row，其就是实际的数据对象；另一个是items，其包含需要填充的输入框的Id号，多个Id之间用半角的逗号隔开。该方法用row中包含的值填充items包含的所有输入框。