select2异步加载数据

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='

' + 
     '
' + repo.text + '
' + 
     '
';
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:选择下拉值的格式化处理函数。

 

 

 

 

   

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(UI组件)