/** * yvan.yvselect.js * @author luoyifan * 2019-07-22 19:21:00 */ 'use strict'; (function ($) { function init(target) { var state = $.data(target, 'yvselect'); var option = state.options; var $dom = $(target); var select2Option = { language: "zh-CN", placeholder: '请选择', allowClear: true, data: option.data, matcher: function (term, text) { term = term.toUpperCase(); //支持拼音筛选 if (pinyin) { var letter = pinyin.getCamelChars(text) + ' ' + text; return (letter.toUpperCase().indexOf(term) >= 0); } else { return (text.toUpperCase().indexOf(term) >= 0); } }, }; if (option.multiple === true) { $.extend(select2Option, { allowClear: true, multiple: true, tags: false, separator: option.joinChar, tokenSeparators: option.joinChar, minimumSelectionLength: select2Option.minTagLength, maximumSelectionLength: select2Option.maxTagLength }); } $dom.textbox($.extend({}, option, { onChange: function () { }, onValidate: function (validResult) { var option = $(this).textbox("options"); var box = $(this); if (option.oldInputValue != undefined) { box.val(option.oldInputValue); option.oldInputValue = undefined; } var tb = box.next(); if (validResult) { tb.removeClass("textbox-invalid"); } else { tb.addClass("textbox-invalid"); } //option.onValidate.call(target, validResult); } })); var $ctl = $dom.textbox('textbox'); $ctl.select2(select2Option); //将 validatebox 属性,复制给 select2.container 控件下面 var validateboxOpt = $ctl.data('validatebox'); var select2Data = $ctl.data('select2'); $.data(select2Data.container[0], 'validatebox', validateboxOpt); var ss = $ctl.data('select2'); //validatebox 需要监听 focus / blur / mouseenter / mouseleave // 4个事件,见 jquery.validatebox.src.js 329行 ss.container.on('mouseenter mouseleave', function (e) { var $target = $(e.target).closest('.select2-container'); var state = $target.data('validatebox'); var option = state.options; e.data = { target: $target[0] }; switch (e.type) { case 'mouseenter': return option.events.mouseenter(e); case 'mouseleave': return option.events.mouseleave(e); } }); //让 container 能获取焦点, 防止错过 validatebox 定位焦点的问题 //同时需要修改 jquery.easyui.min.js 7175 行 ss.container.attr('tabindex', 10); $ctl.on("select2-focus select2-blur", function (e) { var state = $(e.target).data('validatebox'); var option = state.options; e.data = { target: e.target }; switch (e.type) { case 'select2-focus': return option.events.focus(e); case 'select2-blur': return option.events.blur(e); } }); $ctl.on("select2-selected selected select2-removed", function (e) { selectValueChange(this, e); }); } function selectValueChange(target, e) { target = $(target).parent().prev()[0]; var state = $.data(target, 'yvselect'); var option = state.options; var $dom = $(target); var $ctl = $dom.textbox('textbox'); var newValue = ""; if (option.multiple === true) { newValue = $ctl.select2('val').join(option.joinChar); } else { if (e.type === 'select2-removed') { newValue = ""; } else { newValue = e.val; } } $dom.textbox('setValue', newValue); if ($.type(e.type) === 'string' && $.type(option.onChange) === 'function') { option.onChange.call(target, newValue, e); } } $.fn.yvselect = function (options, param) { if (typeof options == 'string') { var method = $.fn.yvselect.methods[options]; if (method) { var args = [this]; for (var i = 1; i < arguments.length; i++) { args.push(arguments[i]); } return method.apply(this, args); } else { console.error('not found method:' + options); } return; } options = options || {}; return this.each(function () { var state = $.data(this, 'yvselect'); if (state) { $.extend(state.options, options); } else { var parseOptions = function (target) { var t = $(target); return $.extend({}, $.fn.validatebox.parseOptions(target), $.fn.textbox.parseOptions(target), { value: (t.val() || undefined), type: (t.attr("type") ? t.attr("type") : undefined) } ); }; $.data(this, 'yvselect', { options: $.extend({}, $.fn.yvselect.defaults, parseOptions(this), options) }); } init(this); }); }; $.fn.yvselect.methods = { getValue: function ($dom) { var $ctl = $dom.textbox('textbox'); return $ctl.select2('val'); }, setValue: function ($dom, value) { var $ctl = $dom.textbox('textbox'); return $ctl.select2('val', value); }, getText: function ($dom) { var $ctl = $dom.textbox('textbox'); var data = $ctl.select2('data'); if(data) { return data.text } }, open: function ($dom) { var $ctl = $dom.textbox('textbox'); return $ctl.select2('open'); }, close: function ($dom) { var $ctl = $dom.textbox('textbox'); return $ctl.select2('close'); } }; $.extend($.fn.validatebox.methods, { setValues: function ($dom, value) { return $dom.each(function () { var $me = $(this); if ($me.hasClass('select2-container')) { if ($.type(value) === 'array') { $me.select2('val', value); selectValueChange($me[0], {}); } else if ($.type(value) === 'string') { $me.select2('val', value.split(',')); selectValueChange($me[0], {}); } } }); } }); $.fn.yvselect.defaults = { required: false, validType: null, validParams: null, delay: 200, interval: 200, deltaX: 0, deltaY: 0, novalidate: false, editable: true, disabled: false, readonly: false, validateOnCreate: true, validateOnBlur: false, multiple: false, joinChar: ",", minTagLength: 1, maxTagLength: 999, label: null, labelPosition: "before", labelAlign: 'right', width: 280, labelWidth: 120, prompt: "", multiline: false, type: "select", // missingMessage: "必填", missingMessage: "", invalidMessage: null, tipPosition: "right", val: function (target) { if (!$.data(target, 'select2')) { return ""; } var value = $(target).select2('val'); if (value === null) { return ""; } return value; }, onValidate: function (validResult) { } }; })(jQuery);