前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >select2加载远程数据示例

select2加载远程数据示例

作者头像
河岸飞流
发布2019-08-09 17:16:16
1.5K0
发布2019-08-09 17:16:16
举报
文章被收录于专栏:开发杂记开发杂记

核心js

代码语言:javascript
复制
$("#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;

代码语言:javascript
复制
 /**
 * 
 * <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主页

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-08-01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档