菜单

Select2的长距离数据操作

2018年11月15日 - Ajax

万一我要以我的select2中默认添加一个事先由服务器上获得了的数额,通过以下方法实现。实测可行~

 一、概述

    如果下拉列表框中之始末极其多,最好是用Select2的远程数据进行筛。

var value = 1
var text = '默认文本'
$('.selecter').html('<option value="' + value + '">' + text + '</option>').trigger("change")

次、参考文献

https://select2.github.io/examples.html\#data-ajax

https://github.com/select2/select2/issues/2950

上述代码其实就算是将class=”selecter”的select内容开展重复定义,最后提醒select2更新。

三、前端Ajax配置

$(elemStr).select2(
            {
                placeholder: 'Enter name',
                //Does the user have to enter any data before sending the ajax request
                minimumInputLength: 1,
                allowClear: true,
                language: "zh-CN",
                ajax: {
                    //How long the user has to pause their typing before sending the next request
                    delay: 250,
                    //The url of the json service
                    url: "/Controller/Action",
                    dataType: 'json',
                    //Our search term and what page we are on
                    data: function (params) {
                        if (params.term == "undefined") {
                            searchItem = " ";
                        }
                        else {
                            searchItem = params.term;
                        }
                        var query = {
                            searchTerm: searchItem,
                            pageSize: 20,
                            pageNum: params.page || 1

                        };                       
                        return query;
                    },
                    processResults: function (data, params) {
                        //Used to determine whether or not there are more results available,
                        //and if requests for more data should be sent in the infinite scrolling
                        params.page = params.page || 1;                        return {
                            results: data.results,
                            pagination: {
                                more: (params.page * 20) < data.total
                            }
                        };
                    },
                    cache: true
                }
            });

现实的参数说明见参考文献的指南,说几个重大参数:

  1. 从今定义为后台传输参数:

    data: function (params) {

                         var query = {
                             searchTerm: searchItem,
                             pageSize: 20,
                             pageNum: params.page || 1
    
                         };                       
                         return query;
                     },
    

朝后台传输了输入框中的值:searchTerm,
整个下拉列表中只是显示的数额:pageSize,当前页码:pageNum

  1. 结果回到后的处理过程:

    return {

          results: data.results,
          pagination: {
          more: (params.page * 20) < data.total
         }       
    

data.results与data.total是后台传送回来的json格式,此处需留意results与total必须是有些写!(见参考文献2)

即时首Select2于应用ajax获取远程数据经常显示默认数据的艺术就是是聊编分享给大家的全部内容了,希望会给大家一个参阅,也希望大家多支持脚本的寒。

 四、后端处理

  1. 切合select2格式的型

    public class Select2Result

     {
         public string id { get; set; }
         public string text { get; set; }
     }
    
  2. 回去到select2扭转调函数的模型

    public class Select2PagedResult

     {
         public int total { get; set; }
         public List<Select2Result> results { get; set; }
     }
    
  3. Controller/Action

    [HttpGet]

         public async Task<IActionResult> GetDepartmentPersonSelectList(string searchTerm = null, int pageSize = 20, int pageNum = 1)
         {
    
             var departmentPersonListQuery = repo.GetAll();
    
             if (!String.IsNullOrEmpty(searchTerm))
             {
                 departmentPersonListQuery = departmentPersonListQuery.Where(a => a.SpellingFirstCode.Contains(searchTerm));
             }
             var total = await departmentPersonListQuery.CountAsync();
    
             var departmentPersonList = await departmentPersonListQuery.OrderBy(a => a.SpellingFirstCode)
                 .Skip(pageSize * (pageNum - 1))
                 .Take(pageSize).Select(a => new Select2Result { id = a.PersonID.ToString(), text = a.PersonName })
                 .ToListAsync();
             Select2PagedResult result = new Select2PagedResult { total = total, results = departmentPersonList };
    
             return new JsonResult(result);
         }
    

 

您或许感兴趣之章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图