1.select2 加载数组数据
2.select2异步加载远程数据
select2的异步加载数据使用的jquery的ajax进行加载
html
js
$("#example2").select2({
theme: "bootstrap",
language: "zh-CN",
placeholder: "",
placeholderOption: "first",
allowClear: true,
ajax: {
url: "/getProducts",
dataType: 'json',
delay: 250,
type:"post",
data: function(params) {
var query = {
q: params.term,
pageSize:config.select2PageSize,
page: params.page
}
return query;
},
processResults: function(data, params) {
params.page = params.page || 1;
var results = [];
$.each(data.items,function(i,v){
var o ={};
o.id=v.oid;
o.oid=v.oid;
o.productName=v.productName;
o.comment=v.comment;
results.push(o);
});
return {
results: results,
pagination: {
more: (params.page * config.select2PageSize) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function(markup) {
return markup;
},
minimumInputLength: 1,
maximumInputLength:20,
templateResult: function(repo){
repo.id =repo.oid;
if(repo.comment!="")
{
repo.text =repo.productName+"("+repo.comment+")";
}
else
{
repo.text =repo.productName
}
if(repo.id==undefined)
{
return;
}
var markup='
'
'
return markup;
},
templateSelection: function(repo){
repo.selected = true;
repo.id = repo.oid;
repo.productName = repo.text;
if(repo.id == null || repo.id == ""){
repo.text = '';
repo.productName = repo.text;
}
return repo.productName;
}
});
参数项说明:
theme:select2采用的样式
language:select2使用的语言,可以实现select2的国际化
placeholder:select2默认的提示信息
placeholderOption:
allowClear:是否可以清楚选择项,true表示可以,false表示不可用
ajax
url:代表请求的后端服务器地址
datatype:返回的数据类型,一般采用json
data:表示传递给后端的参数。可以支持多个参数传递
var select2PageSize=10;
eg: data: function(params) {
var query = {
q: params.term,
pageSize:select2PageSize,
page: params.page
}
return query;
}
pagesize:每页显示数据的大少。
page:当前是第几页。
processResults:服务端返回的结果。
processResults: function(data, params) {
params.page = params.page || 1;
var results = [];
$.each(data.items,function(i,v){
var o ={};
o.id=v.oid;
o.oid=v.oid;
o.name=v.name;
o.comment=v.comment;
results.push(o);
});
return {
results: results,
pagination: {
more: (params.page * select2PageSize) < data.total_count
}
};
服务端返回数据的格式:{
items:{[
{'zhangsan1','1'}, {'zhangsan2','2'}, {'zhangsan3','3'},
]}
total_count:15
}
select2需要的数据格式中必须包含id属性,否则出来的select2组件会遇到不能选择下拉值的问题,所以需要重新分装返回的结果信息。
pagination:是否采用分页加载处理。
escapeMarkup:特殊的格式化处理。
multiple:multiple 实现多选
minimumInputLength:最少输入的字符数的长度
maximumInputLength:最大输入字符数的长度
templateResult:格式化服务端返回的结果,可以支持图文结合的方式。
templateSelection:选择下拉值的格式化处理函数。