select2 插件加载后端数据

2018-02-09 19:21:42来源:cnblogs.com作者:abcByme人点击

分享
//html

  <select class="form-group form-control" name="roomId" id="roomList" data-op="eq" data-type="L" title="请选择租赁空间">
    <option value="">全部</option>
  </select>

function selectRoomId(select) {    $(select).select2({        ajax: {            url: webroot + "/spaceRoom/listRoom?buildingId=&floor=",            dataType: 'json',            delay: 250,            data: function(params) {                var query = {                    code: params.term                }                return query;            },            processResults: function(data, params) {                //请求接口返回数据                params.page = params.page || 1;                return {                    results: data.result                };            },            cache: true        },        //options        language: "zh-CN",        placeholder: '请输入房间号',        allowClear: true,        width: '300px',        //键盘选择事件        escapeMarkup: function(markup) {            return markup;        },        minimumInputLength: 1,        templateResult: formatRepo,        templateSelection: formatRepoSelection    });}// 数据列表function formatRepo(repo) {    if (repo.loading) {        return repo.text;    }    var markup = "<div></div>";    markup += "<div class='select2-result-repository clearfix'>" +        "<div class='select2-result-repository__title'>" + repo.roomPath + "</div>";    return markup;}//选择填入内容和返回字段function formatRepoSelection(repo) {    return repo.text || repo.roomPath || repo.id;}

//调用

var roomIds = $('#roomList');
selectRoomId(roomIds);

 

 //这里是post请求,传参为json(上面是get请求)

function selectRoomId(select) {    $(select).select2({        ajax: {            url: webroot + '/spaceRoom/listRoom',            dataType: 'json',            delay: 250,            type:'POST',            contentType: "application/json",            data: function(params) {                var paramss = {                    code: params.term                };                return JSON.stringify(paramss);            },            processResults: function(data, params) {                //请求接口返回数据                params.page = params.page || 1;                return {                    results: data.result                };            },            cache: true        },        //options        language: "zh-CN",        placeholder: '请输入房间号',        allowClear: true,        width: '300px',        //键盘选择事件        escapeMarkup: function(markup) {            return markup;        },        minimumInputLength: 1,        templateResult: formatRepo,        templateSelection: formatRepoSelection    });}// 数据列表function formatRepo(repo) {    if (repo.loading) {        return repo.text;    }    var markup = "<div></div>";    markup += "<div class='select2-result-repository clearfix'>" +        "<div class='select2-result-repository__title'>" + repo.roomPath + "</div>";    return markup;}//选择填入内容和返回字段function formatRepoSelection(repo) {    return repo.text || repo.roomPath || repo.id;}

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台