Chosen通用初始化

折月煮酒 提交于 2019-11-29 06:40:57

一直在用Chosen这个js插件,其目的就是美化下拉框。github地址:https://harvesthq.github.io/chosen/

no_results_text:"xxxxx"无搜索结果时显示的文本

allow_single_deselect:true 是否允许取消选择

disable_search: true 是否有搜索框出现

max_selected_options:当select为多选时,最多选择个数

官方说明文档地址

配置选项的官方说明文档地址

/* 功能:  Chosen通用初始化
 * 创建人:Brian  创建时间:2016-12-13
 */
(function ($j) {
    var chosenTool = function (el, options) {
        this.opts = options;
        this.chosenInit();
        this.chose_get_init();
        this.chose_mult_set_init(this.opts.hidClassName);
        this.clickEvent();
        return this;
    }

    chosenTool.opts = {
        selectId: '',//selectId
        hidClassName: '',//隐藏域Class
        placeholdertxt: '',//select中placeholder文字
        noresulttxt: '',//输入的名称未查到时显示的文字
        dataJson: ''//数据源
    };

    $j.fn.myChosenTool = function (opt) {
        var value,
           args = Array.prototype.slice.call(arguments, 1);
        var $jthis = $j(this),
            data = $jthis.data('chosenTool'),
            options = $j.extend({}, chosenTool.opts, $jthis.data(),
                typeof option === 'object' && option);

        if (typeof option === 'string') {
            //判断用户调用的方法是否存在
            //if ($j.inArray(option, allowedMethods) < 0) {
            //    throw new Error("Unknown method: " + option);
            //}
            if (!data) {
                return;
            }
            value = data[option].apply(data, args);
            if (option === 'destroy') {
                $jthis.removeData('chosenTool');
            }
        }

        /*插件外部调用插件内部的方法需要修改成下面形式*/
        //if (typeof opt === 'string') {
        //    if (!data) {
        //        return;
        //    }
        //    value = data[opt].apply(data, args);
        //    if (opt === 'destroy') {
        //        $jthis.removeData('chosenTool');
        //    }
        //}

        if (!data) {
            opt["selectId"] = $j(this).attr("id");
            $jthis.data('chosenTool', (data = new chosenTool(this, opt)));
        }

        console.log(data);

        return typeof value === 'undefined' ? this : value;
    };

    chosenTool.prototype.clickEvent = function () {
        var _this = this;
        $j("#" + this.opts.selectId).on("change", function () {
            _this.chose_get_value();
        });
    };

    /*下拉框初始化方法*/
    chosenTool.prototype.selectInfoInit = function () {
        var proOPts = "";
        this.opts.dataJson = $j.parseJSON(this.opts.dataJson);
        $j.each(this.opts.dataJson, function (index, item) {
            proOPts += "<option value='" + item.ValueField + "'>" + item.TextField + "</option>";
        });

        $j("#" + this.opts.selectId).append(proOPts);

        //初始化chosen
        $j("#" + this.opts.selectId).chosen({
            allow_single_deselect: true, //是否允许取消选择
            placeholder_text_multiple: this.opts.placeholdertxt, //多选框没有选中任何值的时候 显示的文字
            no_results_text: this.opts.noresulttxt,//无搜索结果时显示的文本
            search_contains: true//是否支持模糊搜索
        });
    };

    /*对象初始化方法*/
    chosenTool.prototype.chosenInit = function () {
        this.selectInfoInit();
    };

    //私有方法,检测参数是否合法
    chosenTool.prototype.isValid = function () {
        return !this.options || (this.options && typeof this.options === "object") ? true : false;
    };

    //数据同步
    chosenTool.prototype.chose_get_init = function () {
        var selectId = this.opts.selectId;
        $j("#" + this.opts.selectId).chosen().change(
                 function () {
                     $j("#" + selectId).trigger("liszt:updated");//更新下拉框
                 });
    };

    //单选select value获取
    chosenTool.prototype.chose_get_value = function () {
        var selectVal = $j("#" + this.opts.selectId).val();
        $j("." + this.opts.hidClassName).val(selectVal);
    };

    //单选select value获取
    chosenTool.prototype.chose_mult_set_init = function () {
        var values = $j("." + this.opts.hidClassName).val();
        if (values && values.indexOf(',') > 0) {
            var arr = values.split(',');
            var length = arr.length;
            var value = '';
            for (i = 0; i < length; i++) {
                value = arr[i];
                $j("#" + this.opts.selectId + " [value='" + value + "']").attr('selected', 'selected');
            }
        } else {
            $j("#" + this.opts.selectId + " [value='" + values + "']").attr('selected', 'selected');
        }
        $j("#" + this.opts.selectId).trigger("liszt:updated");
    };

    //select text获取,多选时请注意
    chosenTool.prototype.chose_get_text = function () {
        return $j("#" + this.opts.selectId + " option:selected").text();
    };

})(jQuery);

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!