easyui 对form扩展

功能描述

easyui 中  combobox 多选赋值方法如下:

$(‘#cbx‘).combobox(‘setValues‘, [‘01‘,‘02‘])

然而,业务中是以  “01,02” 的形式存储,并且 combobox 较多,为防止业务数据冗余,影响后期维护,现对 form 进行扩展 myLoad,实现 combobox 在多选(multiple = true)情况下,可以用字符串自动赋值 combobox 的操作,并且不影响 load 原有的功能,比如 "01,02" 可以直接赋值给 combobox。

代码

$.extend($.fn.form.methods, {
    myLoad: function (jq, param) {
        return jq.each(function () {
            load(this, param);
        });

        function load(target, data) {
            if (!$.data(target, "form")) {
                $.data(target, "form", {
                    options: $.extend({},
                    $.fn.form.defaults)
                });
            }
            var options = $.data(target, "form").options;
            if (typeof data == "string") {
                var param = {};
                if (options.onBeforeLoad.call(target, param) == false) {
                    return;
                }
                $.ajax({
                    url: data,
                    data: param,
                    dataType: "json",
                    success: function (data) {
                        _load2(data);
                    },
                    error: function () {
                        options.onLoadError.apply(target, arguments);
                    }
                });
            } else {
                _load2(data);
            }
            function _load2(data) {
                var form = $(target);
                for (var name in data) {
                    var val = data[name];
                    var rr = setChecked(name, val);
                    if (!rr.length) {
                        var f = form.find("input[numberboxName=\"" + name + "\"]");
                        if (f.length) {
                            f.numberbox("setValue", val);
                        } else {
                            $("input[name=\"" + name + "\"]", form).val(val);
                            $("textarea[name=\"" + name + "\"]", form).val(val);
                            $("select[name=\"" + name + "\"]", form).val(val);
                        }
                    }
                    setValue(name, val);
                }
                options.onLoadSuccess.call(target, data);
                _validate(target);
            };
            //设置选中
            function setChecked(name, val) {
                var form = $(target);
                var rr = $("input[name=\"" + name + "\"][type=radio], input[name=\"" + name + "\"][type=checkbox]", form);
                $.fn.prop ? rr.prop("checked", false) : rr.attr("checked", false);
                rr.each(function () {
                    var f = $(this);
                    if (f.val() == String(val)) {
                        $.fn.prop ? f.prop("checked", true) : f.attr("checked", true);
                    }
                });
                return rr;
            };
            //设置值
            function setValue(name, val) {
                var form = $(target);
                var types = ["combotree", "combogrid", "datetimebox", "datebox"];
                var comboboxTypes = ["combobox", "combo"];
                var c = form.find("[comboName=\"" + name + "\"]");
                if (c.length) {
                    for (var i = 0; i < types.length; i++) {
                        var type = types[i];
                        if (c.hasClass(type + "-f")) {
                            if (c[type]("options").multiple) {
                                c[type]("setValues", val);
                            } else {
                                c[type]("setValue", val);
                            }
                            return;
                        }
                    }
                    for (var i = 0; i < comboboxTypes.length; i++) {
                        var comboboxType = comboboxTypes[i];
                        if (c.hasClass(comboboxType + "-f")) {
                            if (c[comboboxType]("options").multiple) {
                                if (val != null) {
                                    var valArray = val.split(",")
                                    c[comboboxType]("setValues", valArray);
                                }

                            } else {
                                c[comboboxType]("setValue", val);
                            }
                            return;
                        }
                    }
                }
            };
        };
    }
});

//表单字段验证,当所有字段都有效的时候返回true。
function _validate(target) {
    if ($.fn.validatebox) {
        var t = $(target);
        t.find(".validatebox-text:not(:disabled)").validatebox("validate");
        var valid = t.find(".validatebox-invalid");
        valid.filter(":not(:disabled):first").focus();
        return valid.length == 0;
    }
    return true;
};

  

原文地址:https://www.cnblogs.com/liruihuan/p/9172450.html

时间: 2024-10-09 02:57:35

easyui 对form扩展的相关文章

给EasyUi的Form添加自动填充部分输入框的方法

根据项目需要,基于获取的数据对Form的部分输入框进行填充,而默认的EasyUI的Form 没有该方法,只能一个输入框一个输入框的直接赋值,为此增加了Form对象的setValues,实现根据给定的Id来填充的功能.代码如下: $.extend($.fn.form.methods, { setValues: function (myself, data) { var form = $(myself); var opts = $.data(form[0], "form").options

解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象

原文:解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象 之前开发时遇到的一个问题,使用easyui的form提交表单,在Chrome下时没问题的,但是在IE下出现类似附件下载时提示是否保存的现象. 这里记录一下如何解决的.其实这个现象不光是easyui的form,还有其他一些form插件也是一样的,使用不当就会遇到这个问题. 前台: <!DOCTYPE html> <html> <head> <meta http-equiv=

IE浏览器中,JQuery EasyUI的form(&#39;load&#39;)方法只能加载一次的问题

项目中的页面用到了EasyUI,表单加载数据时,调用了form('load')方法.用Chrome.Firefox访问均没问题,可是用IE浏览器访问时,数据不论怎么修改,加载的都是第一次的数据.这疑似是一直在加载第一次的缓存.于是查资料发现,原来IE浏览器对Jquery EasyUI的支持不好,缓存了表单第一次加载的数据.以后每次加载时,都会从缓存中调用.于是在ajax方法中加入cache:false,取消缓存便解决了. 1 $.ajax({ 2 cache:false, //取消缓存 3 ur

EasyUI Icon 图标扩展(1775个)

最近在用EasyUI做项目是发现自带的Icon图标太少,而且不是很美观.于是就有了下面的东西. 直接上图:(纯属个人无聊之作勿喷) css及图标下载地址: http://download.csdn.net/detail/miracle98/7579723 EasyUI Icon 图标扩展(1775个)

给EasyUi的Form加入自己主动填充部分输入框的方法

依据项目须要,基于获取的数据对Form的部分输入框进行填充,而默认的EasyUI的Form 没有该方法.仅仅能一个输入框一个输入框的直接赋值,为此添加了Form对象的setValues,实现依据给定的Id来填充的功能.代码例如以下: $.extend($.fn.form.methods, { setValues: function (myself, data) { var form = $(myself); var opts = $.data(form[0], "form").opti

easyui datagrid plunges 扩展 插件

  项目使用 springmvc4.x  spring4.x  hibernate4.x easyui 为了便于开发,扩展了easyui 的 datagrid 功能,下面直接贴上扩展代码: /** * context 指定为 项目上下文 * index 如果定义多组dataGrid,index指定为对应的参数:一组dataGrid包含(datagrid;toorbar;dialog;button) * templateUrl 指定为 此次访问操作对应的controller路径 * crud 指定

easyui Datagrid方法扩展 - tooltip

最新版本的jQuery Easyui新出来了一个组件叫tooltip,就是提示框.以前的版本没有这个组件的时候就有很多在问,datagrid的单元格,我要加鼠标提示要怎么做.原来我告诉他们的方法都是用formatter,大概方法如下: formatter:function(value){ return '<span title="'+value+'">'+value+'<span>'; } 这样的方式就利用了浏览器自己的title特性,来达到显示效果.只是这种实

Easyui Tree方法扩展 - getLevel(获取节点级别)

Easyui Tree一直就没有提供这个方法,以前没有用到,所以一直没怎么在意,这次自己用到了,顺便扩展了一个方法,分享给大家. $.extend($.fn.tree.methods, { getLevel:function(jq,target){ var l = $(target).parentsUntil("ul.tree","ul"); return l.length+1; } }); 用法: var node = $().tree("getSele

easyUI之Form(表单)组件

一.对于在easyui中使用的组件,具有输入.输出功能的使用<input>标签,其它的使用<div>标签. 二.对于<input>标签,在使用过程,将name属性和id属性同时赋一样的值,否则在传值的过程中有可能出现取不到值的情况. 三.<form>组件方法有两大类:1.submit:进行提交2.load:信息取回.其格式为: $("#selector").form("load",)或$("#selector