Select2 4.0.5 API

Select2 4.0.5 API

详细属性参考官方API,https://github.com/select2/select2/releases/tag/4.0.5
注:4.0.5版本API与3.x版本有差异,有些属性已废弃,以下列出常用属性及其参考值:

1、API

属性 类型 默认值 描述
data Array of objects Null 数据集合,基础数据格式{id:””, text:””, selected: true/选中/, disabled: true/失效/}
width string “” 宽度
style string “” 样式
ajax object null Ajax请求数据
minimumResultsForSearch Integer null 设置支持搜索的最小集合,设置为负数,隐藏搜索框
minimumInputLength Integer   输入指定长度字符后开始搜索
multiple boolean False 是否多选,默认单选
maximumSelectionSize Integer   支持最大的选择数量,int/function
maximumInputLength Integer   支持搜索的最大字符数
placeholder String “” 选择提示
allowClear Boolean false 是否显示清除按钮,只有设置了placeholder才有效
closeOnSelect Boolean true 是否选中后关闭选择框,默认true
templateSelection callback   选中项样式
templateResult callback   选项样式
matcher callback   过滤选项集合
sorter callback   选项结果集排序
theme String   主题,可以设置bootstrap主题
tags Boolean   是否可动态创建选项
tokenSeparators Aray   输入时使用分隔符创建新选项
createTag callback   创建新标签
insertTag callback   在选项集合后插入标签
disabled boolean false 是否失效
debug boolean false 是否开启debug

注:initSelection 和query已废弃

2、定义组件Select2

/**
 * 创建select2基础组件
 */
 select2: function(selector, option, allDefault){
      if(allDefault){
          $(selector).select2(option);
      }else{
          $(selector).select2($.extend(true, {}, defaultOption, option));
      }
  }

3、测试用例

html(省略)

js

require(["jquery", "js/component/Select2"], function($, Select2){
     $(document).ready(function(){
    var data = [{id:"1", text:"测试1"}, {id:"2", text:"测试2"}];
     var format = function(data){
     return $("" + data.text+ "111" + "");
     }
     // 基本搜索
     Select2.select2("#select", {data: data});
     // 无搜索框
     Select2.select2("#noSearchSelect", {data: data, minimumResultsForSearch: -1});
            // 多选
            Select2.select2("#multiSelect", {data: data, multiple: true});
            // 最多输入的字符数
            Select2.select2("#maxInput", {data: data, maximumInputLength: 2});
            // 显示清除按钮
            Select2.select2("#allowClear", {data: data, placeholder: "123", allowClear: true});
            // 格式化选项
            Select2.select2("#formatSection", {data: data, templateSelection: format,
                templateResult: format});
            // ajax请求数据
            Select2.select2("#ajaxSelect", {width:"50%",  ajax: {
                url: 'https://api.github.com/orgs/select2/repos',
                data: function (params) {
                  var query = {
                    search: params.term,
                    type: 'public'
                  }
                  return query;
                }
            }}, true);
            // ajax分页,官方例子,没有出现分页情况,后续用到时具体测试(2018.8.31)
            Select2.select2("#ajaxPagination", {
                width: "50%",
                ajax: {
                    url: "https://api.github.com/search/repositories",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                      return {
                        q: params.term, // search term
                        page: params.page
                      };
                    },
                    processResults: function (data, params) {
                      // parse the results into the format expected by Select2
                      // since we are using custom formatting functions we do not need to
                      // alter the remote JSON data, except to indicate that infinite
                      // scrolling can be used
                      params.page = params.page || 1;

                      return {
                        results: data.items,
                        pagination: {
                          more: (params.page * 30) < data.total_count
                        }
                      };
                    },
                    cache: true
                  },
              placeholder: 'Search for a repository',
              escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
              minimumInputLength: 1
            }, true);
            
            // 动态创建新选项
            Select2.select2("#dynamicOption", {width:"50%", data:data, tags:true}, true);
            
        });
    });

链接:https://www.jianshu.com/p/778e9f21fc3d

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/112366.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号