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主页

上一篇:POJ2456 Aggressive cows


下一篇:通过 HTTP 请求加载远程数据(ajax,axios)