Select2的远程数据操作
一、概述
如果下拉列表框中的内容太多,最好是使用Select2的远程数据进行筛选。
二、参考文献
https://select2.github.io/examples.html#data-ajax
https://github.com/select2/select2/issues/2950
三、前端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
2. 结果返回后的处理过程:
return {
results: data.results,
pagination: {
more: (params.page * 20) < data.total
}
data.results与data.total是后台传送回来的json格式,此处需注意results与total必须是小写!(见参考文献2)
四、后端处理
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);
}
Select2的远程数据操作的更多相关文章
- javascript 入门 之select2获取远程数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta lan ...
- Linux中Curl命令couldn't connect to host解决方案 php操作Curl(http,https)无法获取远程数据解决方案
本人在做百度账户第三方登录接口,获取百度token,利用php操作curl post方式发送请求token,出现couldn't connect to host错误.经过调试测试,最后终于成功.回头写 ...
- jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...
- SQL不同服务器数据库之间的数据操作整理(完整版)
---------------------------------------------------------------------------------- -- Author : htl25 ...
- SQLServer服务器数据库之间的数据操作(完整版)
分类: 数据库开发技术 ---------------------------------------------------------------------------------- -- Au ...
- 转载-SQL不同服务器数据库之间的数据操作整理(完整版) .
---------------------------------------------------------------------------------- -- Author : htl25 ...
- [Sqlite]-->Java采用jdbc联系Sqlite各种特定的工艺数据库的数据操作
引: 1, Sqlite在Windows.Linux 和 Mac OS X 上的安装过程 2.嵌入式数据库的安装.建库.建表.更新表结构以及数据导入导出等等具体过程记录 3,嵌 ...
- 第八章| 2. MySQL数据库|数据操作| 权限管理
1.数据操作 SQL(结构化查询语言),可以操作关系型数据库 通过sql可以创建.修改账号并控制账号权限: 通过sql可以创建.修改数据库.表: 通过sql可以增删改查数据: 可以通过SQL语句中 ...
- 转:不在同一个服务器上的数据库之间的数据操作(oracle/sql server的对比)
如何操做不在同一个数据库中的数据操作: 一.对于SQL server来讲: 1.采用创建链接服务器的方式: (1).创建链接服务器 exec sp_addlinkedserver ...
随机推荐
- Linux 服务器安装jdk,mysql,tomcat简要教程
linux服务器是阿里云上买的,学生价9.9/月,拿来学习下. 需要准备软件工具: 1.editplus (编辑服务器上的文件) 2.PuTTY (Linux命令连接器) 3.FlashFXP(上传文 ...
- Scrapy 设置随机 User-Agent
方式一:在每个 Spider中设置(针对单个Spider) class TencentSpider(scrapy.Spider): name = 'tencent' allowed_domains = ...
- 开启两个线程,一个线程打印A~Z,一个线程打印1~52的数据
开启两个线程,一个线程打印A-Z,一个线程打印1-52的数据 import java.util.concurrent.locks.Condition; import java.util.concurr ...
- 4.HadoopMapRe程序设计
1.介绍 2.基本构架与组件 3.基本算法
- [svc]linux中的文件描述符(file descriptor)和文件
linux中的文件描述符(file descriptor)和文件 linux为了实现一切皆文件的设计哲学,不仅将数据抽象成了文件,也将一切操作和资源抽象成了文件,比如说硬件设备,socket,磁盘,进 ...
- vue 添加一个二级目录
原先的: http://xxx.xx.xxx.xxx:xxx/#/ 现在的: http://xxx.xx.xxx.xxx:xxx/guangfu/#/
- springboot整合mybatis时java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone.
时区问题造成的,解决方法是在数据源配置文件中在数据库链接处增加参数&serverTimezone=GMT%2B8对时区进行配置,配置为东八区. 修改前:spring.datasource.ur ...
- Python列表排序
1.冒泡排序 冒泡排序(Bubble Sort)是一种简单的排序算法.它重复地遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.遍历数列的工作是重复地进行直到没有再需要交换,也就 ...
- java8:(Lambda 表达式,Supplier,@FunctionalInterface,foreach(),Optional,Stream().collect,双冒号,joining,partitioningBy分区,collectingAndThen,filter())
1.Lambda 表达式: 引导:http://www.cnblogs.com/yulinfeng/p/8452379.html DEMO1: List<String> names1 = ...
- Invalid Django TIME_ZONE
在linux操作系统运行,设置的时区在系统文件/usr/share/zoneinfo/中找不到会出现以下错误 raceback (most recent call last): File , in & ...