easyui源码翻译1.32--Form（表单）

前言

使用$.fn.form.defaults重写默认值对象下载该插件翻译源码

form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效

源码

/**
 * jQuery EasyUI 1.3.2
 *
 *翻译;qq 1364386878
 */
(function ($) {
    //执行提交操作，该选项的参数是一个对象
    function _submit(target, options) {
        options = options || {};
        var param = {};
        if (options.onSubmit) {
            if (options.onSubmit.call(target, param) == false) {
                return;
            }
        }
        var form = $(target);
        if (options.url) {
            form.attr("action", options.url);
        }
        var iframeid = "easyui_frame_" + (new Date().getTime());
        var frame = $("<iframe id=" + iframeid + " name=" + iframeid + "></iframe>").attr("src",
            window.ActiveXObject ? "javascript:false" : "about:blank").css(
            { position: "absolute", top: -1000, left: -1000 });
        var t = form.attr("target"),
            a = form.attr("action");
        form.attr("target", iframeid);
        var _8 = $();
        try {
            frame.appendTo("body");
            frame.bind("load", cb);
            for (var n in param) {
                var f = $("<input type=\"hidden\" name=\"" + n + "\">").val(param[n]).appendTo(form);
                _8 = _8.add(f);
            }
            form[0].submit();
        }
        finally {
            form.attr("action", a);
            t ? form.attr("target", t) : form.removeAttr("target");
            _8.remove();
        }
        var checkCount = 10;
        function cb() {
            frame.unbind();
            var body = $("#" + iframeid).contents().find("body");
            var data = body.html();
            if (data == "") {
                if (--checkCount) {
                    setTimeout(cb, 100);
                    return;
                }
                return;
            }
            var ta = body.find(">textarea");
            if (ta.length) {
                data = ta.val();
            } else {
                var pre = body.find(">pre");
                if (pre.length) {
                    data = pre.html();
                }
            }
            if (options.success) {
                options.success(data);
            }
            setTimeout(function () {
                frame.unbind();
                frame.remove();
            }, 100);
        };
    };
    //读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录
    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 = ["combobox", "combotree", "combogrid", "datetimebox", "datebox", "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;
                    }
                }
            }
        };
    };
    //清除表单数据
    function _clear(target) {
        $("input,select,textarea", target).each(function () {
            var t = this.type,
                tag = this.tagName.toLowerCase();
            if (t == "text" || t == "hidden" || t == "password" || tag == "textarea") {
                this.value = "";
            } else {
                if (t == "file") {
                    var file = $(this);
                    file.after(file.clone().val(""));
                    file.remove();
                } else {
                    if (t == "checkbox" || t == "radio") {
                        this.checked = false;
                    } else {
                        if (tag == "select") {
                            this.selectedIndex = -1;
                        }
                    }
                }
            }
        });
        if ($.fn.combo) {

            $(".combo-f", target).combo("clear");
        }
        if ($.fn.combobox) {
            $(".combobox-f", target).combobox("clear");
        }
        if ($.fn.combotree) {
            $(".combotree-f", target).combotree("clear");
        }
        if ($.fn.combogrid) {
            $(".combogrid-f", target).combogrid("clear");
        }
        _validate(target);
    };
    //重置表单数据
    function _reset(target) {
        target.reset();
        var t = $(target);

        if ($.fn.combo) {
            t.find(".combo-f").combo("reset");
        }
        if ($.fn.combobox) {
            t.find(".combobox-f").combobox("reset");
        }
        if ($.fn.combotree) {
            t.find(".combotree-f").combotree("reset");
        }
        if ($.fn.combogrid) {
            t.find(".combogrid-f").combogrid("reset");
        }
        if ($.fn.spinner) {
            t.find(".spinner-f").spinner("reset");
        }
        if ($.fn.timespinner) {
            t.find(".timespinner-f").timespinner("reset");
        }
        if ($.fn.numberbox) {
            t.find(".numberbox-f").numberbox("reset");
        }
        if ($.fn.numberspinner) {
            t.find(".numberspinner-f").numberspinner("reset");
        }
        _validate(target);
    };
    //设置表单
    function setForm(target) {
        var options = $.data(target, "form").options;
        var form = $(target);
        form.unbind(".form").bind("submit.form", function () {
            setTimeout(function () {
                _submit(target, options);
            }, 0);
            return false;
        });
    };
    //做表单字段验证，当所有字段都有效的时候返回true。该方法使用validatebox(验证框)插件
    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;
    };
    //实例化form
    $.fn.form = function (options, param) {
        if (typeof options == "string") {
            return $.fn.form.methods[options](this, param);
        }
        options = options || {};
        return this.each(function () {
            if (!$.data(this, "form")) {
                $.data(this, "form", {
                    options: $.extend({},
                        $.fn.form.defaults, options)
                });
            }
            setForm(this);
        });
    };
    //方法
    $.fn.form.methods = {
        //执行提交操作，该选项的参数是一个对象
        submit: function (jq, param) {
            return jq.each(function () {
                _submit(this, $.extend({}, $.fn.form.defaults, param || {}));
            });
        },
        //读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录
        load: function (jq, data) {
            return jq.each(function () {
                _load(this, data);
            });
        },
        //清除表单数据
        clear: function (jq) {
            return jq.each(function () {
                _clear(this);
            });
        },
        //重置表单数据
        reset: function (jq) {
            return jq.each(function () {
                _reset(this);
            });
        },
        //表单字段验证，当所有字段都有效的时候返回true。该方法使用validatebox(验证框)插件
        validate: function (jq) {
            return _validate(jq[0]);
        }
    };

    //form默认属性+事件
    $.fn.form.defaults = {
        url: null,//提交表单动作的URL地址
        //在提交之前触发，返回false可以终止提交
        onSubmit: function (param) {
            return $(this).form("validate");
        },
        //在表单提交成功以后触发
        success: function (data) {
        },
        //在请求加载数据之前触发。返回false可以停止该动作
        onBeforeLoad: function (_30) {
        },
        //在表单数据加载完成后触发
        onLoadSuccess: function (_31) {
        },
        //在表单数据加载出现错误的时候触发
        onLoadError: function () {
        }
    };
})(jQuery);

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Form - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
    <script src="../../plugins2/jquery.parser.js"></script>
    <script src="../../plugins2/jquery.validatebox.js"></script>
    <script src="../../plugins2/jquery.linkbutton.js"></script>
    <script src="../../plugins2/jquery.panel.js"></script>
    <script src="../../plugins2/jquery.form.js"></script>
</head>
<body>
    <h2>Basic Form</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Fill the form and submit it.</div>
    </div>
    <div style="margin:10px 0;"></div>
    <div class="easyui-panel" title="New Topic" style="width:400px">
        <div style="padding:10px 0 10px 60px">
        <form id="ff" method="post">
            <table>
                <tr>
                    <td>Name:</td>
                    <td><input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
                </tr>
                <tr>
                    <td>Subject:</td>
                    <td><input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>
                </tr>
                <tr>
                    <td>Message:</td>
                    <td><textarea name="message" style="height:60px;"></textarea></td>
                </tr>
                <tr>
                    <td>Language:</td>
                    <td>
                        <select class="easyui-combobox" name="language"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
                    </td>
                </tr>
            </table>
        </form>
        </div>
        <div style="text-align:center;padding:5px">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
        </div>
    </div>
    <script>
        function submitForm(){
            $('#ff').form('submit');
        }
        function clearForm(){
            $('#ff').form('clear');
        }
    </script>
</body>
</html>

插件效果