easyui 对form扩展

Posted liruihuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;
};

  

以上是关于easyui 对form扩展的主要内容,如果未能解决你的问题,请参考以下文章

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

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

easyUI的form表单重复提交处理

表单(上)EasyUI Form 表单EasyUI Validatebox 验证框EasyUI Combobox 组合框EasyUI Combo 组合EasyUI Combotree 组合树((代码片

如何使用ajax 提交easyUI form表单

对easyui-validatebox的验证类型的扩展