select2异步加载数据

1.select2 加载数组数据
<script type="text/javascript">
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

$(".js-example-data-array").select2({
data: data
})

$(".js-example-data-array-selected").select2({
data: data
})
</script>

<select class="js-example-data-array"></select>

<select class="js-example-data-array-selected">
<option value="2" selected="selected">duplicate</option>
</select>

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='<div class="clearfix" id='+repo.id+'>' +
     '<div class="col-sm-20">' + repo.text + '</div>' +
     '</div>';
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：选择下拉值的格式化处理函数。

select2异步加载数据

猜你喜欢