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
Select2 4.0.5 API的更多相关文章
- ASP.NET CORE 1.0 MVC API 文档用 SWASHBUCKLE SWAGGER实现
from:https://damienbod.com/2015/12/13/asp-net-5-mvc-6-api-documentation-using-swagger/ 代码生成工具: https ...
- Zepto,Zepto API 中文版,Zepto 中文手册,Zepto API,Zepto API 中文版,Zepto 中文手册,Zepto API 1.0, Zepto API 1.0 中文版,Zepto 1.0 中文手册,Zepto 1.0 API-translate by yaotaiyang
Zepto,Zepto API 中文版,Zepto 中文手册,Zepto API,Zepto API 中文版,Zepto 中文手册,Zepto API 1.0, Zepto API 1.0 中文版,Z ...
- 从头编写 asp.net core 2.0 web api 基础框架 (1)
工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相 ...
- 从头编写 asp.net core 2.0 web api 基础框架 (3)
第一部分:http://www.cnblogs.com/cgzl/p/7637250.html 第二部分:http://www.cnblogs.com/cgzl/p/7640077.html 之前我介 ...
- 【转载】从头编写 asp.net core 2.0 web api 基础框架 (3)
Github源码地址:https://github.com/solenovex/Building-asp.net-core-2-web-api-starter-template-from-scratc ...
- 【转载】从头编写 asp.net core 2.0 web api 基础框架 (1)
工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相 ...
- 从头编写asp.net core 2.0 web api 基础框架 (5) + 使用Identity Server 4建立Authorization Server (7) 可运行前后台源码
前台使用angular 5, 后台是asp.net core 2.0 web api + identity server 4. 从头编写asp.net core 2.0 web api 基础框架: 第 ...
- 新浪微博 使用OAuth2.0调用API
# -*- coding: cp936 -*- #python 2.7.10 #xiaodeng #新浪微博 使用OAuth2.0调用API #微博开放接口的调用,都需要获取用户的身份认证.目前微博开 ...
- 分析现有 WPF / Windows Forms 程序能否顺利迁移到 .NET Core 3.0(使用 .NET Core 3.0 Desktop API Analyzer )
今年五月的 Build 大会上,微软说 .NET Core 3.0 将带来 WPF / Windows Forms 这些桌面应用的支持.当然,是通过 Windows 兼容包(Windows Compa ...
随机推荐
- js格式化输入框内金额、银行卡号[转]
这篇文章主要介绍了js格式化输入框内金额.银行卡号,采用“keyup”事件处理格式化,每4位数一组中间空格隔开,如何格式化输入框内金额.银行卡号,需要了解的朋友可以参考一下 我们在项目中经常遇到需要格 ...
- vi/vim tab键空格数修改
更改Tap键单位 vi/vim编辑器默认情况下,每按一次Tap相对于8个空格. (1)临时性更改 使用vi打开文件后,输入如下命令: :set tabstop=4 命令释义:更改为相当于四个空格. ( ...
- 从 0 → 1,学习Linux该这么开始!
首先我们还是来普及以下概念,讲点虚的.现在是图形系统的天下,windows我们用了20多年.成功归功与它图形界面,你会点鼠标吗你会敲键盘吗?所以你会上网会聊天会玩游戏了.那么,0基础接触的Linux, ...
- 逆元-P3811 【模板】乘法逆元-洛谷luogu
https://www.cnblogs.com/zjp-shadow/p/7773566.html -------------------------------------------------- ...
- face detection[Face R-CNN]
face r-cnn是腾讯ai实验室的作品,而且登录过腾讯ai实验室官网,发现果然硕果累累,不得不佩服. 1 引言 人脸检测虽然相对之前有了不小的进步,可是还是因为真实世界中人脸图像的明显变化导致仍然 ...
- face detection[S^3FD]
本文来自<\(S^3\)FD: Single Shot Scale-invariant Face Detector>,时间线为2017年11月. 0 引言 基于锚的目标检测方法,是通过分类 ...
- mysql基本知识点梳理和查询优化
目录 一.索引相关 二.EXPLIAN中有用的信息 三.字段类型和编码 四.SQL语句总结 五.踩坑 六.千万大表在线修改 七.慢查询日志 八.查看sql进程和杀死进程 九.一些数据库性能的思考 本文 ...
- js 对象与数组相互转化的快捷方法 Object.keys()、Object.values()、Object.entries()
Object.keys() Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性.这些属性的顺序与手动遍历该对象属性时的一致. 例如: let ...
- Django ORM模型:想说爱你不容易
作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁转载. 使用Python的Django模型的话,一般都会用它自带的ORM(Object-relational ma ...
- .Net Core 在 Linux-Centos上的部署实战教程(二)
上篇我们说了 如何在Linux上部署.net core 但是有心的同学会发现你关闭掉终端网站就不能访问了,这个原因是因为直接 dotnet GetConfigFile.dll --server.ur ...