jQuery插件：Ajax將Json數據自動綁定到Form表單

jQuery注冊方法的兩種常用方式：

//jQuery靜態方法注冊
//調用方法$.a1()
$.extend({
    a1: function () {
        console.log("a1");
    }
})
//jQuery插件方法注冊
//調用方法$("#col").b1()
$.fn.extend({
    b1: function () {
        console.log("b1");
    }
})

將ajax返回的數據自動綁定到form表單中的插件，常用語修改等業務，源碼如下：

/*!
 * Json To Form v0.0.1
 * Requires jQuery v1.7.2 or later
 * Author:taiyonghai
 */
; (function ($) {

    /*
    flagName:標識綁定字段元素的屬性，如：
    data-bind是尋找綁定字段的屬性：
    <input data-bind='Time' type='text' />
    <input data-bind='User.Time' type='text' />
    注意區分大小寫，與對象名相同即可
    jsonData:json數據對象，根據其中的屬性名，綁定到對應屬性名的字段上
    */
    var JsonBind = function (ele, opt) {
        this.$element = $(ele),
        this.defaults = {
            flagName: 'name'
        },
        /*
        當給extend方法傳遞一個以上的參數時，它會將所有參數對象合並到第一個里。
        同時，如果對象中有同名屬性時，合並的時候后面的會覆蓋前面的。
        將一個新的空對象做為$.extend的第一個參數，defaults和用戶傳遞的參數對象緊隨其后，
        這樣做的好處是所有值被合並到這個空對象上，保護了插件里面的默認值。
        */
        this.options = $.extend({}, this.defaults, opt)
    };
    //取值方法，可以單獨以實體屬性名進行取值，如：UserName，也可以復合實體取值，如：UserInfo.UserName，注意區分大小寫
    JsonBind.getValue = function (key, data) {
        if (key.split('.').length == 1) {
            return data[key];
        }
        else if (key.split('.').length == 2) {
            var keys = key.split('.');
            //數據有值時獲取
            if (data[keys[0]]) {
                //先判斷數組后判斷object，因為數組也是object
                if (Array.isArray(data[keys[0]])) {
                    return data[keys[0]][0][keys[1]];
                }
                else if (typeof (data[keys[0]]) == 'object') {
                    return data[keys[0]][keys[1]];
                }
                else {
                    return console.error("對象類型錯誤，無法解析");
                }
            }
        }
        else {
            return console.error("實體對象層級過多，最多支持兩級，如：test.name");
        }
    };
    JsonBind.prototype = {
        bind: function () {
            if (this.options.jsonData) {
                if (this.options.jsonData == 'string') {
                    this.options.jsonData = JSON.parse(this.options.jsonData);
                }
            }
            //獲得觸發事件的元素
            var dom = this.$element;
            var name = this.options.flagName;
            var data = this.options.jsonData;
            //遍歷元素內所有含有name屬性的元素
            dom.find("[" + name + "]").each(function () {
                //取出json中對應name屬性的值
                var key = $.trim($(this).attr(name));
                var val = JsonBind.getValue(key, data);
                if (val != '') {
                    //檢查當前元素標簽，並根據不同標簽進行賦值操作
                    if ($(this).is("input")) {
                        //檢查當前元素類型，並根據不同類型進行賦值操作
                        switch ($(this).attr("type")) {
                            case "radio":
                                $(dom).find("input:radio[" + name + "='" + key + "'][value='" + val + "']").prop("checked", true);
                                break;
                            case "checkbox":
                                $(dom).find("input:checkbox[" + name + "='" + key + "'][value='" + val + "']").prop("checked", true);
                                //$(this).siblings("[value='" + val + "']").prop("checked", true);
                                break;
                            default:
                                $(this).val(val);
                                break;
                        }
                    }
                    else {
                        //如：select、textarea
                        $(this).val(val);
                    }
                }
            });
        }
    };
    //將方法增加到jQuery擴展方法中
    $.fn.extend({
        dataBind: function (options) {
            var jsBind = new JsonBind(this, options);
            jsBind.bind();
        }
    });

})(jQuery);

調用方式：

//flagName是可選參數，默認是元素的name屬性
$("#menuForm").dataBind({
    jsonData:JSON.parse(data),
    flagName:'name'
});

 復合實體調用方式

var data = {
    Tag: 'aaa',
    FunctionName: 'bbb',
    Url: 'ccc',
    OrderBy: '111'
};
$("#menuForm").dataBind({
    flagName: 'name',
    jsonData: { menu: data, menu1: data, menu2: data, menu3: data }
});

 變量聲明，var $abc=$("#test")，這里面的$abc我們認為它是一個jQuery對象，所以前面加上$符