[easyui]封裝一個form

封裝了dialog,datagrid,這個form也是必不可少啊

先看怎麼使用

有圖有真相

html

<!--表單內部想怎麼放就怎麼放，我個人習慣如下襬放-->
<form id="form" method="post">
    <table>
        <tr>
            <td>textbox</td>
            <td><input name="textbox" /></td>
        </tr>
        <tr>
            <td>numberbox</td>
            <td><input name="numberbox" /></td>
        </tr>
        <tr>
            <td>combobox</td>
            <td><input name="combobox" /></td>
        </tr>
        <tr>
            <td>checkbox</td>
            <td><input name="checkbox" type="checkbox" /></td>
        </tr>
        <tr>
            <td>radio</td>
            <td>
                <label><input type="radio" name="radio" value="0" checked /> yes</label>
                <label><input type="radio" name="radio" value="1" /> no</label>
            </td>
        </tr>
    </table>
    <p>
        <button type="button" name="btnSubmit">Submit</button>
        <button type="button" name="btnReset">Reset</button>
    </p>
</form>

我還是喜歡用js來渲染組件，更加靈活自由。
而如果使用html聲明，則會影響頁面打開速度。

凡是在form中需要交互的元素，我都會給一個name，原因往後看就知道。

js

var form = new window.hm.form('#form', {
    renders: {
        textbox: function () {
            return $(this).textbox();
        },
        numberbox: function () {
            return $(this).numberbox();
        },
        combobox: function () {
            return $(this).combobox();
        },
        checkbox:function () {
            return $(this);
        },
        radio: function () {
            return $(this);
        },

        btnSubmit: function () {
            return $(this).linkbutton({
                onClick: function () {
                    form.invoke('submit');
                }
            });
        },
        btnReset: function () {
            return $(this).linkbutton({
                onClick: function () {
                    form.invoke('reset');
                }
            })
        }
    }
});

這裏有兩個參數

第一個就是元素的選擇器啦，也可以傳入Element

如果你的form有name，那就可以這樣傳 new window.hm.form(document.formname,{});

第二個參數就是form的參數了，可以參考easyui官網

這裏我擴展了一個參數renders 類型是object
使用這個參數，可以很方便的渲染組件，只要根據組件的name，定義一個function

例如有個標籤 <input name="textbox" />
則可以這樣定義

var form = new window.hm.form('#form',{
    renders:{
        textbox: function () {return $(this).textbox();}
    }
});

該函數一定要返回一個引用

之後就可以通過form.inputs.textbox直接獲取到該元素

在初始化form的時候，會遍歷form裏的元素，然後在renders裏面匹配name，匹配到則執行對應的function，同時將執行結果添加到 form.inputs 裏面，這樣就可以通過 form.inputs.name 快速獲得組件的引用

這裏稍微注意一點就是 type=radio 的時候，會有相同name重複出現的情況，比如name=”radio”
那renders就這樣定義 radio:function(){return $(this);}
而到時候獲取的時候，form.inputs.radio 這裏會取到的是個集合，包含所有name=radio的元素
如果你想取到當前選中的值，這樣寫即可 form.inputs.radio.filter(‘:checked’).val()

完整代碼 [form.js]

(function () {
    'use strict';
    // init 初始化這個form的回調
    function form(selector, options, callback) {
        var target = {
            form: null,
            options: null
        };
        return {
            inputs: {},
            init : function () {
                if (null === target.form) {
                    target.options = $.extend({}, form.defaults, form.events, options);
                    target.form = $(selector).form(target.options);
                    // 
                    if (target.options.renders) {
                        var inputs = {};
                        target.form.find('input,button').each(function () {
                            if (this.name) {
                                var render = target.options.renders[this.name];
                                if (render) {
                                    var input = inputs[this.name];
                                    if (input) {
                                        // 如果已經有了，通常是 type=radio 共用一個name
                                        if (this.type === 'radio') {
                                            inputs[this.name] = input.add(render.call(this));
                                        }
                                    }else{
                                        inputs[this.name] = render.call(this);
                                    }
                                }
                            }
                        });
                        this.inputs = inputs;
                    }

                    // 給一個回調，一般來綁定 時間範圍 的關聯
                    if (callback) { callback.call(target.form[0]); }
                }
                return this;
            },
            invoke: function (method, params) {
                var result;
                this.init();
                if (form.methods[method]) {
                    result = form.methods[method].call(target, params);
                } else {
                    result = target.form.form(method, params);
                }
                if (result === target.form) { return this; }
                return result;
            }
        };
    };

    form.defaults = {
        // 用來定義組件渲染，object，其中 key 爲組件的 name，value 爲一個 function ，返回渲染結果
        renders: null
    };
    form.events = {};
    form.methods = {
        getData: function () {
            var form = this.form[0];

            var data = {};

            for (var i = 0; i < form.length; i++) {
                var ele = form[i];

                var tagName = ele.tagName.toLowerCase();

                // 只需要如下的標籤
                if ($.inArray(tagName,['input', 'select']) > -1) {
                    //console.log(ele);
                    // 只獲取包含name屬性的元素
                    if (ele.name) {
                        var key = ele.name, value = ele.value;

                        switch (ele.type) {
                            case 'radio': if (!ele.checked) { continue; } break;
                            case 'checkbox': value = ele.checked; break;
                            default:
                        }

                        data[key] = value;
                    }
                }
            }
            return data;
        }
    };



    window.hm.form = form;
})();

說明

我添加了一個getData方法，獲取當前表單所有數據，是想獲取跟submit時一樣的數據

這種博客太難寫了！