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

posted @ 2017-08-01 10:58  河岸飞流  阅读(1815)  评论(2编辑  收藏  举报

那片笑声让我想起我的那些花儿
在我生命每个角落静静为我开着
我曾以为我会永远守在她身旁
今天我们已经离去在人海茫茫
她们都老了吧 她们在哪里呀
幸运的是我曾陪她们开放