hust-epi/admin-ui/yvanui/yvanui.yvselect.js

/**
 * 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);