easyui checkbox radiobox 擴展

(function ($) {
    function _1(_2) {
        $(_2).addClass("textbox-f").hide();
        var _3 = $("<span>" + "<input type=\"hidden\" class=\"textbox-value\">" + "</span>").insertAfter(_2);
        var _4 = $(_2).attr("name");
        if (_4) {
            _3.find("input.textbox-value").attr("name", _4);
            $(_2).removeAttr("name").attr("textboxName", _4);
        }
        return _3;
    };



    function getsetval(_3, v) {

        var _7 = $.data(_3, "checkgroupbox");
        var _8 = _7.options;
        var tb = _7.textbox;
        var sp = _8.separator;
        var ml = _8.multiple;

        var oldval = _8.value;

        if (v === undefined) {
            return tb.find("input.textbox-value").val();
        }

        if (v == null)
            v = "";
        if (typeof v != "array" && typeof v != "string")
            v = String(v);

        var arrv = v;
        if (typeof v == "string")
            arrv = v.split(sp);
        else {
            for (var i = 0; i < v.length; i++)
                v[i] = String(v[i]);

            v = v.join(sp);
        }

        tb.find("input.textbox-value").val(v);
        _8.value = v;
        tb.find("input.checkgroupboxcheck").prop("checked", false).each(function () {
            if ($.inArray(this.value,arrv ) > -1) {
                $(this).prop("checked", true);
                if (ml == false)
                    return false;
            }
        });

        if (oldval != v && _8.onChange) {
            _8.onChange.call(_3, v, oldval);
        }
    }

    function _5(_6) {
        var _7 = $.data(_6, "checkgroupbox");
        var _8 = _7.options;
        var tb = _7.textbox;
        tb.find("input.checkgroupboxcheck").parent().remove();
        _8.data = _8.data || [];

        function render() {
            var html = "";

            $.each(_8.data, function (index, item) {
                html += "<label><input type='checkbox'   class='checkgroupboxcheck' value='" + item.value + "' />" + item.text + "</label>";
            });
            $(html).prependTo(tb);

            _a(_6, _8.disabled);
            if (_8.value)
                getsetval(_6, _8.value);
            
        }

        if (_8.url) {
            var loading = $("<span class='pagination-loading'>&nbsp;&nbsp;&nbsp;&nbsp;</span>").prependTo(tb);
            $.ajax({
                url: _8.url,
                data: _8.queryParam || {},
                type: 'post',
                async: true,
                cache: false,
                dataType: 'json',
                complete: function () { loading.remove(); },
                error: function () { loading.remove(); },
                success: function (data) {
                    _8.data.length = 0;
                    [].push.apply(_8.data, data);
                    render();
                }
            });

            return;
        }
        render();
    };

    function _c(_d) {
        var tb = $.data(_d, "checkgroupbox").textbox;
        tb.unbind().remove();

        var name = $(_d).removeClass("textbox-f").show().attr("textboxName");
        $(_d).attr("name", name).removeData("checkgroupbox");

    };


    function _a(_2e, _2f) {
        var _30 = $.data(_2e, "checkgroupbox");
        var _31 = _30.options;
        var tb = _30.textbox;
        if (_2f) {
            _31.disabled = true;
            $(_2e).attr("disabled", "disabled");
            tb.addClass("textbox-disabled");
            tb.find(".checkgroupboxcheck").prop("disabled", true);
        } else {
            _31.disabled = false;
            tb.removeClass("textbox-disabled");
            $(_2e).removeAttr("disabled");
            tb.find(".checkgroupboxcheck").prop("disabled", false);
        }
    };

    $.fn.checkgroupbox = function (_37, _38) {
        if (typeof _37 == "string") {
            var _39 = $.fn.checkgroupbox.methods[_37];
            if (_39) {
                return _39(this, _38);
            }
            throw "方法：" + _37 + "不存在";
        }
        _37 = _37 || {};
        return this.each(function () {
            var _3b = $.data(this, "checkgroupbox");
            if (_3b) {
                $.extend(_3b.options, _37);
            } else {
                _3b = $.data(this, "checkgroupbox", { options: $.extend({}, $.fn.checkgroupbox.defaults, $.fn.checkgroupbox.parseOptions(this), _37), textbox: _1(this) });
                var tb = _3b.textbox;
                var self = this;
                tb.on("click", "input.checkgroupboxcheck", function () {
                    var oldval = _3b.options.value;
                    var valarr = [];

                    var sp = _3b.options.separator;
                    var sg = _3b.options.multiple==false;
                    var self = this;
                    tb.find("input.checkgroupboxcheck:checked").each(function () {
                        if (sg && self != this) {
                            $(this).prop("checked", false);
                            return;
                        }
                        valarr.push(this.value)
                    });

                    var newval = valarr.join(sp);

                    tb.find("input.textbox-value").val(newval);
                    _3b.options.value = newval;

                    var doonchange = true;
                    if (_3b.options.onCheckChange && oldval != newval) {
                        doonchange = _3b.options.onCheckChange.call(self, newval, oldval);
                    }

                    if (!(doonchange === false) && _3b.options.onChange && oldval != newval) {
                        _3b.options.onChange.call(self, newval, oldval);
                    }
                });
            }
            _5(this);
        });
    };
    $.fn.checkgroupbox.methods = {
        options: function (jq) {
            return $.data(jq[0], "checkgroupbox").options;
        }, destroy: function (jq) {
            return jq.each(function () {
                _c(this);
            });
        }, disable: function (jq) {
            return jq.each(function () {
                _a(this, true);

            });
        }, enable: function (jq) {
            return jq.each(function () {
                _a(this, false);
            });
        }, clear: function (jq) {
            return jq.each(function () {
                getsetval(this, "");
            });
        }, initValue: function (jq, _45) {
            return jq.each(function () {
                getsetval(this, _45);
            });
        }, setValue: function (jq, _47) {
            return jq.each(function () {
                var _48 = $.data(this, "checkgroupbox").options;
                var _49 = _48.value;
                getsetval(this, _47);

                if (_49 != _47) {
                    $(this).closest("form").trigger("_change", [this]);
                }
            });
        }, getText: function (jq) {

            var sp = jq.data("checkgroupbox").options.separator;
            var textarr = [];
            jq.data("checkgroupbox").textbox.find("input:checked").parent().each(function(){
                textarr.push($(this).text());
            });;
            return textarr.join(sp);
        }, getValue: function (jq) {
            return jq.data("checkgroupbox").options.value;
        },
        reload: function (jq, param) {
            return jq.each(function () {
                var _48 = $.data(this, "checkgroupbox").options;
                if (param) {
                    _48.queryParam = param;
                }
                _5(this);
            });
        }
    };
    $.fn.checkgroupbox.parseOptions = function (_52) {
        var t = $(_52);
        return $.extend({}, $.fn.validatebox.parseOptions(_52), { value: (t.val() || undefined), disabled: (t.attr("disabled") ? true : undefined), multiple: (t.attr("multiple") == "false" ? false : true), separator: t.attr("separator") || undefined });
    };
    $.fn.checkgroupbox.defaults = $.extend({}, $.fn.validatebox.defaults, {
        width: "auto", height: 22, value: "", multiple: true, disabled: false, separator: ',',
        onChange: function (_54, _55) {

        }, onCheckChange: function (newval, oldval) {

            // 點擊時值變化時執行， return false 時，不執行onChange
            return true;
        }
    });
    $.parser.plugins.push("checkgroupbox");
})(jQuery);

(function ($) {
    function _1(_2) {
        $(_2).addClass("textbox-f").hide();
        var _3 = $("<span>" + "<input type=\"hidden\" class=\"textbox-value\">" + "</span>").insertAfter(_2);
        var _4 = $(_2).attr("name");
        if (_4) {
            _3.find("input.textbox-value").attr("name", _4);
            $(_2).removeAttr("name").attr("textboxName", _4);
        }
        return _3;
    };

    var nameindex = 1;

    function getsetval(_3, v) {

        var _7 = $.data(_3, "radiogroupbox");
        var _8 = _7.options;
        var tb = _7.textbox;

        var oldval = _8.value;

        if (v === undefined) {
            return tb.find("input.textbox-value").val();
        }
        if (v == null)
            v = "";
        v = String(v);
        tb.find("input.textbox-value").val(v);
        _8.value = v;
        tb.find("input.radiogroupboxradio").prop("checked", false).each(function () {
            if (this.value == v) {
                $(this).prop("checked", true);
                return false;
            }
        });

        if (oldval != v && _8.onChange) {
            _8.onChange.call(_3, v, oldval);
        } 
    }

    function _5(_6) {
        var _7 = $.data(_6, "radiogroupbox");
        var _8 = _7.options;
        var tb = _7.textbox;
        tb.find("input.radiogroupboxradio").parent().remove();
        _8.data = _8.data || [];

        function render() {
            var html = "";

            $.each(_8.data, function (index, item) {
                html += "<label><input type='radio' name='radiogroupboxradio" + (nameindex) + "' class='radiogroupboxradio' value='" + item.value + "' />" + item.text + "</label>";
            });
            $(html).prependTo(tb);

            _a(_6, _8.disabled);
            if (_8.value)
                getsetval(_6, _8.value);
            nameindex += 1;
        }

        if (_8.url) {
            var loading = $("<span class='pagination-loading'>&nbsp;&nbsp;&nbsp;&nbsp;</span>").prependTo(tb);
            $.ajax({
                url: _8.url,
                data: _8.queryParam || {},
                type: 'post',
                async: true,
                cache: false,
                dataType: 'json',
                complete: function () { loading.remove(); },
                error: function () { loading.remove(); },
                success: function (data) {
                    _8.data.length =0;
                    [].push.apply(_8.data, data);
                    render();
                }
            });

            return;
        }
        render();
    };

    function _c(_d) {
        var tb = $.data(_d, "radiogroupbox").textbox;
        tb.unbind().remove();

        var name = $(_d).removeClass("textbox-f").show().attr("textboxName");
        $(_d).attr("name", name).removeData("radiogroupbox");
        
    };


    function _a(_2e, _2f) {
        var _30 = $.data(_2e, "radiogroupbox");
        var _31 = _30.options;
        var tb = _30.textbox;
        if (_2f) {
            _31.disabled = true;
            $(_2e).attr("disabled", "disabled");
            tb.addClass("textbox-disabled");
            tb.find(".radiogroupboxradio").prop("disabled", true);
        } else {
            _31.disabled = false;
            tb.removeClass("textbox-disabled");
            $(_2e).removeAttr("disabled");
            tb.find(".radiogroupboxradio").prop("disabled", false);
        }
    };

    $.fn.radiogroupbox = function (_37, _38) {
        if (typeof _37 == "string") {
            var _39 = $.fn.radiogroupbox.methods[_37];
            if (_39) {
                return _39(this, _38);
            }
            throw "方法：" + _37 + "不存在";
        }
        _37 = _37 || {};
        return this.each(function () {
            var _3b = $.data(this, "radiogroupbox");
            if (_3b) {
                $.extend(_3b.options, _37);
            } else {
                _3b = $.data(this, "radiogroupbox", { options: $.extend({}, $.fn.radiogroupbox.defaults, $.fn.radiogroupbox.parseOptions(this), _37), textbox: _1(this) });
                var tb = _3b.textbox;
                var self = this;
                tb.on("click", "input.radiogroupboxradio", function () {
                    var oldval = _3b.options.value;
                    tb.find("input.textbox-value").val(this.value);
                    _3b.options.value = this.value;
                    
                    var doonchange = true;
                    if (_3b.options.onCheckChange&&oldval!=this.value) {
                        doonchange = _3b.options.onCheckChange.call(self, this.value, oldval);
                    }

                    if (!(doonchange === false) && _3b.options.onChange && oldval != this.value) {
                        _3b.options.onChange.call(self, this.value, oldval);
                    } 
                });
            }
            _5(this);
        });
    };
    $.fn.radiogroupbox.methods = {
        options: function (jq) {
            return $.data(jq[0], "radiogroupbox").options;
        }, destroy: function (jq) {
            return jq.each(function () {
                _c(this);
            });
        }, disable: function (jq) {
            return jq.each(function () {
                _a(this, true);

            });
        }, enable: function (jq) {
            return jq.each(function () {
                _a(this, false);
            });
        }, clear: function (jq) {
            return jq.each(function () {               
                getsetval(this, "");
            });
        }, initValue: function (jq, _45) {
            return jq.each(function () {
                getsetval(this, _45);
            });
        }, setValue: function (jq, _47) {
            return jq.each(function () {
                var _48 = $.data(this, "radiogroupbox").options;
                var _49 = _48.value;
                getsetval(this, _47);

                if (_49 != _47) {                  
                    $(this).closest("form").trigger("_change", [this]);
                }
            });
        }, getText: function (jq) {
            var _4a = jq.data("radiogroupbox").textbox.find("input:checked").parent().text();
            return _4a;
        }, getValue: function (jq) {
            return jq.data("radiogroupbox").options.value;
        },
        reload: function (jq, param) {
            return jq.each(function () {
                var _48 = $.data(this, "radiogroupbox").options;
                if (param) {  
                    _48.queryParam = param;   
                }
                _5(this); 
            });
        }
    };
    $.fn.radiogroupbox.parseOptions = function (_52) {
        var t = $(_52);
        return $.extend({}, $.fn.validatebox.parseOptions(_52), { value: (t.val() || undefined), disabled: (t.attr("disabled") ? true : undefined) });
    };
    $.fn.radiogroupbox.defaults = $.extend({}, $.fn.validatebox.defaults, {
        width: "auto", height: 22, value: "",   disabled: false,
        onChange: function (_54, _55) {

        }, onCheckChange: function (newval, oldval) {

            // 點擊時值變化時執行， return false 時，不執行onChange
            return true;
        }
    });
    $.parser.plugins.push("radiogroupbox");
})(jQuery);

用法

    <input class="easyui-checkgroupbox" id="tbradio" value="3,2" data-options="url:'/PLM/QualityIab/IQC.aspx?op=GetStatus',onChange:fn_change,onCheckChange:fn_checkchange" />
    <br />
    <input class="easyui-checkgroupbox" data-options="data:[{text:'1',value:'1'},{text:'2',value:'2'},{text:'3',value:'3'}]" />

    <br />
    
    <br />

    <input type="button" value="設置值" οnclick="$('#tbradio').checkgroupbox('setValue','3')" />
    <input type="button" value="重置" οnclick="$('#tbradio').checkgroupbox('clear')" />

    <input type="button" value="獲取值" οnclick="alert($('#tbradio').checkgroupbox('getValue'))" />
    
    <input type="button" value="獲取文本" οnclick="alert($('#tbradio').checkgroupbox('getText'))" />

    <input type="button" value="刷新" οnclick="$('#tbradio').checkgroupbox('reload')" />

    <input type="button" value="啓用" οnclick="$('#tbradio').checkgroupbox('enable')" />

    <input type="button" value="禁用" οnclick="$('#tbradio').checkgroupbox('disable')" />
    <input type="button" value="銷燬" οnclick="$('#tbradio').checkgroupbox('destroy')" />

    <input type="button" value="創建" οnclick="$('#tbradio').checkgroupbox({ multiple: false })" />

  

    <script type="text/javascript">
        function fn_change(val, old) {
            alert("新值:"+val+",舊值:"+old);
        }

        function fn_checkchange(val, old) {
             
        }

    </script>