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 ...
随机推荐
- Riot.js——一个小而美的JS框架
Riot.js是什么? Riot 拥有创建现代客户端应用的所有必需的成分: "响应式" 视图层用来创建用户界面 用来在各独立模块之间进行通信的事件库 用来管理URL和浏览器回退按钮 ...
- (十五)C语言之字符串
- LeetCode 137. 只出现一次的数字 II(Single Number II)
题目描述 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现了三次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 示例 1: ...
- phpstorm 比较修改过的代码 version control
- 卸载apache
1.查看httpd相关软件包 rpm -qa|grep httpd 2.卸载命令, “rpm -e 软件或服务名” 如果出现类似“httpd >= 2.2.0 is needed by (ins ...
- Uboot启动分析之Start.S
1.start.S引入 1.1.u-boot.lds中找到start.S入口 1)C语言中代码的分析第一步就是找到main.c,找到函数的入口 2)uboot中因为有汇编语言参与所以就不能像C一样.U ...
- Django框架 选项卡加active类的方案
------html部分----- <div class="left-menu"> <div class="menu-body"> &l ...
- go 基础 结构体 接口 访问权限
package School type SchoolModel struct { Name string Address string StudentCount int Is985 bool } ty ...
- ojdbc15-10.2.0.4.0.jar maven 引用报错 Dependency 'com.oracle:ojdbc15:10.2.0.4.0' not found
ojdbc15-10.2.0.4.0.jar maven 引用报错 问题现象 在 Maven 工程中引用 ojdbc15-10.2.0.4.0.jar 报错,报错信息:Dependency 'com. ...
- SAP Query创建
一.SAP Query创建步骤 1.创建User Group User Group即用户组,可以将所创建的列表使用权限分配给具体用户,Tcode:SQ03 在使用者群組初始界面里输入自定义名称,单击[ ...