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 ...
随机推荐
- zookeeper系列(三)zookeeper的使用--开源客户端
作者:leesf 掌控之中,才会成功:掌控之外,注定失败, 原创博客地址:http://www.cnblogs.com/leesf456/ 奇文共欣赏,大家共同学习进步. 一.前言 上一篇博客已 ...
- IDEA的小技巧:1.Java代码不被识别2.目录下创建的文件夹所显示样式不是文件夹,而是"包"图标样式的问题
在Idea上面一个正常的代码结构是这个样子的,但是有的时候,比如说当我们直接在一个文件夹中随便的创建的时候就会出现一些问题,比如说想让某个地方为代码目录,某个地方为资源目录的时候,直接的创建目录是不成 ...
- 有趣但是没有用的linux命令
1,小火车 #yum install sl 2,黑客帝国,代码雨 # wget https://jaist.dl.sourceforge.net/project/cmatrix/cmatrix/1.2 ...
- Leetcode题目31.下一个排列(中等)
题目描述: 实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个更大的排列,则将数字重新排列成最小的排列(即升序排列). 必须原地修改,只允许使用额外 ...
- 20165213 Exp6 信息搜集与漏洞扫描
信息搜集与漏洞扫描 一. 实践内容 (1)各种搜索技巧的应用 利用Google Hacking Datebase搜索. 尝试搜索http相关的漏洞,可以看到漏洞的相关信息. 也可以使用过滤器进行过滤, ...
- zeppelin 无法连接一个已有的standalone模式的spark集群
SparkInterpreter.java 这个文件里面读取master的属性有些问题: 原来代码中"master"属性的获取的地方应该是错了.设置和读取这个属性的对象不是同一个 ...
- java list对象按照某个属性去重
/** * 去重 * * @param orderList * @return * @author jqlin */ private static List<ansVo> removeDu ...
- Spring Annotations
@Bean 这是一个方法注解,作用是实例化一个Bean并使用该方法的名臣命名.
- Mac os文件名大小写不敏感
Mac os文件名大小写不敏感,但是linux是大小写敏感的. 让我们代入一个场景, 创建一个新文件,你习惯以小写字母开头,接着在其他module中import,看起来一切都正常,emmm,确实没有任 ...
- gateway 整合 websocket demo
背景: 这个websocket 因为使用的地方不多,并没有独立出一个项目,是集成在已有的服务中. 1: gateway 配置 - id: service-test uri: lb:ws://se ...