jQuery 플러그 인: Ajax 는 JSon 데 이 터 를 Form 폼 에 자동 으로 연결 합 니 다.

10941 단어 자바 scriptjson
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          :
    
    
           ,        
    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 대상 이 라 고 생각 하기 때문에 앞 에 $부 호 를 추가 합 니 다.
다음으로 전송:https://www.cnblogs.com/taiyonghai/p/7504618.html

좋은 웹페이지 즐겨찾기