select2加载远程数据示例
核心js
$("#query_pack_code").select2({
language: "zh-CN",
allowClear: true,
width: "150px",
placeholder: "请选择",
ajax: {
url: "monitor/historyQuery/getPackCodeOptions.mvc",
dataType: 'json',
delay: 250,
data: function (params) {
params.offset = 10; //显示十条
params.page = params.page || 1; //页码
return {
name: params.term,
page: params.page,
offset: params.offset
};
},
cache: false,
/*
*@params res 返回值
*@params params 参数
*/
processResults: function (res, params) {
var users = res.data;
var options = [];
for (var i = 0, len = users.length; i < len; i++) {
var option = {
"id": users[i]["serialNo"],
"text": (users[i]["serialNo"])
};
options.push(option);
}
return {
results: options,
pagination: {
more: (params.page * params.offset) < res.total
}
};
},
escapeMarkup: function (markup) {
return markup;
},
minimumInputLength: 1
}
});
后台使用的springmvc+mybatis 分页使用的插件com.github.miemiedev.mybatis.paginator.domain.PageBounds;
/**
*
* <p>Description: 下拉框异步加载</p>
* @param res 请求
* @return 结果集
*/
@RequestMapping(value="/getPackCodeOptions.mvc")
@ResponseBody
public Object getPackCodeOptions(HttpServletRequest res){
//分页
PageBounds pageBounds;
pageBounds = new PageBounds();
//查询条件
String name = res.getParameter("name");
//每页显示条数
Integer offset = Integer.valueOf(res.getParameter("offset"));
//当前页码
Integer page = Integer.valueOf(res.getParameter("page"));
if (page == 1) {
page = 0;
} else {
page = (page - 1) * offset;
}
pageBounds.setLimit(offset);
pageBounds.setPage(page);
Map<String, Object> params;
params = new HashMap<String, Object>();
params.put("name", name);
EntityPageBean<TmPackSerial> pageBean;
Map<String, Object> dataMap=new HashMap<String, Object>();
try {
pageBean = this.tmPackSerialService.getPackCodeOptions(params, pageBounds);
dataMap.put("total", pageBean.getiTotalRecords());
dataMap.put("recordsFiltered", pageBean.getiTotalRecords());
dataMap.put("data", pageBean.getResults());
} catch (DaoException e) {
logger.error("查询出错:", e);
return null;
}
return dataMap;
}
效果图:

参考资料: select2主页
select2加载远程数据示例的更多相关文章
- jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...
- Jquery.ajax 详细解释 通过Http请求加载远程数据
首先请看一个Jquery.ajax的例子 $.ajax({ type: "GET", url: "/api/SearchApi/GetResults", dat ...
- 通过 HTTP 请求加载远程数据(ajax,axios)
1.http://blog.csdn.net/liaoxiaojuan233/article/details/54176798 (Axios(JS HTTP库/Ajax库)) 2.https://ww ...
- ExtJS ComboBox同时加载远程和本地数据
ExtJS ComboBox同时加载远程和本地数据 原文:http://gblog.hbcf.net/index.php/archives/233 ComboBox比较特殊需求,将远程数据和本地数据同 ...
- Tree:加载列表数据
Tree控件,需要提供一个树形的JSON数据,才能正常显示. 通常,开发者在后台可以这样做: 1)从数据库查询出一个列表数据 2)在后台,将列表数据转换为树形数据 3)通过JSON方式返回 在前台页面 ...
- xss如何加载远程js的一些tips
在早期 , 对于xss我们是这样利用的 <script>window.open('http://xxx.xxx/cookie.asp?msg='+document.cookie)</ ...
- Swift - 网页控件(UIWebView)加载本地数据,文件
使用UIWebView加载本地数据或资源有如下三种方式: 1,使用loadHTMLString方法加载HTML内容 2,使用loadRequest方法加载本地资源(也可用于加载服务器资源) 3,先将内 ...
- Mego开发文档 - 加载关系数据
加载关系数据 Mego允许您使用模型中的导航属性来加载相关数据对象.目前只支持强制加载数据对象.只有正确配置了关系才能加载关系数据,相关内容可参考关系配置文档. 加载对象属性 您可以使用该Includ ...
- WinForm ListView不分页加载大量数据
WinForm的ListView在加载大量数据时会出现闪烁的问题,同时数据加载很慢.如果你的列表中有超过千条的数据且不做特殊处理还是用普通的ListView.Items.Add(),估计你的用户得抱怨 ...
随机推荐
- 快捷键&小技巧
shift+鼠标滚轮:实现左右移动 alt+鼠标左键双击:打开属性 chrome中在F12下的Element中,可以先选中某一项,可以直接按住F2进行编辑 chrome中element的右下方我们可以 ...
- .NET源码Stack<T>和Queue<T>的实现
这阵子在重温数据结构的时候,顺便用ILSpy看了一些.NET类库的实现,发现一些基本的数据结构的实现方法也是挺有意思的,所以这里拿出来跟大家分享一下.这篇文章讨论的是Stack和Queue的泛型实现. ...
- tomcat在eclipse创建过程分析
在本地eclipse上创建一个tomcat server 即tomcat服务器时, 会复制一份tomca安装目录中的conf文件下的配置文件到这个tomcat server目录下 这个tomcat s ...
- android学习-Activity启动过程详解
注:只是说明启动activity的过程(ActivityThread如何与ActivityManagerService简称AmS进行进程间通信调用全过程),不解析android从zygote(受精卵) ...
- 爬虫实战(二) 51job移动端数据采集
在上一篇51job职位信息的爬取中,对岗位信息div下各式各样杂乱的标签,简单的Xpath效果不佳,加上string()函数后,也不尽如人意.因此这次我们跳过桌面web端,选择移动端进行爬取. ...
- puts,p,print的区别
共同点:都是用来屏幕输出的. 不同点: puts 输出内容后,会自动换行(如果内容参数为空,则仅输出一个换行符号):另外如果内容参数中有转义符,输出时将先处理转义再输出 p 基本与puts相同,但不会 ...
- TryParse用法示例
int.Parse()是一种类型转换:表示将数字内容的字符串转为int类型.如果字符串为空,则抛出ArgumentNullException异常:如果字符串内容不是数字,则抛出FormatExce ...
- spring 下载地址及相关概念解析
http://www.springsource.org/download/community Release Candidate(RC)候选版本,用于指软件或操作系统的发布,一般与Debug版本相对应 ...
- C#中is与as的区别分析
这篇文章主要介绍了C#中is与as的区别,较为详细的分析了is与as的原理与特性及用法区别,具有很好的学习借鉴价值,需要的朋友可以参考下 本文实例分析了C#中is与as的区别,分享给大家供大家参考.具 ...
- 修改MVC视图默认搜索规则(IViewEngine)
前几天我自己在写一个系统,写到后台管理系统的时候,我突然有个想法就是:想在区域视图下新建文件,单独处理后台一些业务:Area/AdminManager/View/Content/Index.cshtm ...