select2，利用ajax高效查询大数据列表可搜索、可分页

分类：Ajax作者：编程之家用户

select2是一款jquery插件，是普通form表单select组件的升级版。
可以定制搜索、远程数据集（Remote data，本篇主要介绍点）、无限滚动（数据分页功能，这一点很妙）、还有很多高端的参数设置（有需要的下次介绍）。
内置了40种国际化语言，不过这里我们只需要用到中文。
同时支持现代和传统浏览器内置，甚至包括惹人不高兴的IE8。

那么，现在让我们开始一段select2的奇幻之旅吧！

一、惊艳的效果，来一睹为快吧



本地实战结果

二、导入css和js到网站上

1.使用CDN，节省自己网站的流量

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

2.下载文件到本地，可以做一些个性的定制（比如说修改提示语）

git下载地址

<!-- select2 -->
<link rel="stylesheet" type="text/css" href="${ctx}/common/select2/css/select2.css" />
<script type="text/javascript" src="${ctx}/common/select2/js/select2.full.js"></script>
<!-- 中文国际化还需要进行参数设置 -->
<script type="text/javascript" src="${ctx}/common/select2/js/i18n/zh-CN.js"></script>

三、真刀真枪的干起来

第一步、定制页面个性化元素

<select name="parentid" class="js-data-example-ajax" href="${ctx}/member/loadMembersInfo.do?uid=${mem.uid}" style="width:400px" inputMessage="请输入会员编号(可部分匹配)">
    <option selected="selected" value="666">沉默王二</option>
</select>
  1. Java端通过name属性可获得select的value值。
  2. 设置class为js-data-example-ajax，页面加载时对该组件进行select2的初始化。
  3. href属性为ajax提供后台检索的URL。
  4. style设置组件的宽度。
  5. inputMessage属性定制个性化的提示语，默认的英文版为Please enter 1 or more characters，中文国际化为“请再输入至少1个字符”，都不太能满足个性化需求，所以需要改，后面介绍。
  6. 提供一个默认的option，页面没检索之前显示。

第二步、select2组件化，注释写得很详细了哦

<script type="text/javascript">
    $(function() {
        $("select.js-data-example-ajax").each(
        function() {
            var $this = $(this);
            $this.select2({
                language : "zh-CN",// 指定语言为中文，国际化才起效
                inputMessage : $this.attr("inputMessage"),// 添加默认参数
                ajax : {
                    url : $this.attr("href"),dataType : 'json',delay : 250,// 延迟显示
                    data : function(params) {
                        return {
                            username : params.term,// 搜索框内输入的内容，传递到Java后端的parameter为username
                            page : params.page,// 第几页，分页哦
                            rows : 10// 每页显示多少行
                        };
                    },// 分页
                    processResults : function(data,params) {
                        params.page = params.page || 1;

                        return {
                            results : data.data,// 后台返回的数据集
                            pagination : {
                                more : params.page < data.total// 总页数为10，那么1-9页的时候都可以下拉刷新
                            }
                        };
                    },cache : false
                },escapeMarkup : function(markup) {
                    return markup;
                },// let our custom formatter work
                minimumInputLength : 1,// 最少输入一个字符才开始检索
                templateResult : function(repo) {// 显示的结果集格式，这里需要自己写css样式，可参照demo
                    // 正在检索
                    if (repo.loading)
                        return repo.text;

                    var markup = repo.username;

                    markup += repo.realname;

                    var markup = "<div class='select2-result-repository clearfix'>" + "<div class='select2-result-repository__avatar'><img src='"
                            + repo.headimgUrl + "' /></div>" + "<div class='select2-result-repository__meta'>"
                            + "<div class='select2-result-repository__title'>" + repo.username + "</div>";

                    if (repo.realname) {
                        markup += "<div class='select2-result-repository__description'>" + repo.realname + "</div>";
                    }

                    markup += "<div class='select2-result-repository__statistics'>"
                            + "<div class='select2-result-repository__forks'><i class='fa fa-user'></i> 下级会员数" + repo.children_count + " </div>"
                            + "</div>" + "</div></div>";

                    return markup;
                },templateSelection : function(repo) {
                    return repo.realname || repo.text;
                }// 列表中选择某一项后显示到文本框的内容
            });

        });
    });
</script>

第三步、Java端接收参数并返回结果集，不用我强调，这步很重要

@RequestMapping(value = "loadMembersInfo")
public void loadMembersInfo(HttpServletRequest request,HttpServletResponse response) throws IOException {
    Integer uid = StrUtil.parseStringToInt(request.getParameter("uid"));
    Members mem = this.memberService.selectByPrimaryKey(uid);


    // 分页参数的转换，需要和前台select2进行匹配，下文放代码
    BaseConditionVO vo = getBaseConditionVOForTable(request);
    vo.addParams("username",StrUtil.getUTF8String(request.getParameter("username")));
    vo.addParams("uid",uid);

    // 封装结果集，和前台select2也是匹配的。
    PageGrid page = createPageGrid(this.membersMapper.getPromoterList(vo,vo.createRowBounds()),vo,this.membersMapper.searchPromoterTotalCount(vo));

    // 以json格式写入到response
    out(page,response);

}

接下来，把关键的源码贴出来，可能和你的项目不吻合，但可以参考。

BaseConditionVO.java

public class BaseConditionVO {
    public final static int PAGE_SHOW_COUNT = 50;
    private int pageNum = 1;
    private int numPerPage = 0;
    private int totalCount = 0;
    private String orderField;
    private String orderDirection;

    /** * @Fields ps : 对参数类型进行封装. */
    private Map<String,Object> mo = new HashMap<String,Object>();

    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    public int getNumPerPage() {
        return numPerPage > 0 ? numPerPage : PAGE_SHOW_COUNT;
    }

    public void setNumPerPage(int numPerPage) {
        this.numPerPage = numPerPage;
    }

    public String getOrderField() {
        return orderField;
    }

    public void setOrderField(String orderField) {
        this.orderField = orderField;
    }

    public String getOrderDirection() {
        return "desc".equals(orderDirection) ? "desc" : "asc";
    }

    public void setOrderDirection(String orderDirection) {
        this.orderDirection = orderDirection;
    }

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    public int getStartIndex() {
        int pageNum = this.getPageNum() > 0 ? this.getPageNum() - 1 : 0;
        return pageNum * this.getNumPerPage();
    }

    public RowBounds createRowBounds() {
        RowBounds ro = new RowBounds(this.getStartIndex(),this.getNumPerPage());
        return ro;
    }

    /** * @Title: addParams * @Description: 添加查询条件 * @param key * @param value */
    public void addParams(String key,Object value) {
        this.getMo().put(key,value);
    }

    /** * @Title: getParams * @Description: 获取查询条件 * @param key * @return */
    public Object getParams(String key) {
        return this.getMo().get(key);
    }

    /** * @return the mo */
    public Map<String,Object> getMo() {
        return mo;
    }

    /** * @param mo * the mo to set */
    public void setMo(Map<String,Object> mo) {
        this.mo = mo;
    }
}

selec2的分页和Java端分页参数匹配

protected BaseConditionVO getBaseConditionVOForTable(HttpServletRequest req) {
    BaseConditionVO vo = new BaseConditionVO();
    // 当前页
    int currentPage = StrUtil.parseStringToInt(req.getParameter("page"));
    // 一页显示多少行
    int sizes = StrUtil.parseStringToInt(req.getParameter("rows"));
    // 排序
    String sortOrder = StrUtil.getString(req.getParameter("sord"));
    String sortCol = StrUtil.getString(req.getParameter("sidx"));
    vo.setNumPerPage(sizes);
    vo.setPageNum(currentPage);
    vo.setOrderField(sortCol);
    vo.setOrderDirection(sortOrder);

    return vo;
}

Java端到select2端的数据封装

@XStreamAlias("pageGrid")
@SuppressWarnings("rawtypes")
public class PageGrid {
    private int page;
    // 总页数，和select2的processResults.pagination匹配
    private int total;
    private int records;

    // 数据结果集，和select2的processResults.results匹配
    private List data;

    public int getPage() {
        return this.page;
    }

    public void setPage(int page) {
        this.page = page;
    }

    public int getTotal() {
        return this.total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public int getRecords() {
        return this.records;
    }

    public void setRecords(int records) {
        this.records = records;
    }

    public List getData() {
        return this.data;
    }

    public void setData(List data) {
        this.data = data;
    }
}

mysql获取的数据源和PageGrid进行转换匹配

protected PageGrid createPageGrid(List list,BaseConditionVO vo,int searchTotalCount) {
    PageGrid pageGrid = new PageGrid();
    // 数据
    pageGrid.setData(list);
    // 当前页
    pageGrid.setPage(vo.getPageNum());
    // 总数目
    pageGrid.setRecords(list.size());

    // 总页数
    int total = 0;
    if (pageGrid.getRecords() != 0) {
        total = searchTotalCount % vo.getNumPerPage() == 0 ? searchTotalCount / vo.getNumPerPage()
                : searchTotalCount / vo.getNumPerPage() + 1;
    }

    pageGrid.setTotal(total);
    return pageGrid;
}

mybatis的分页，超简单，只要设置了createRowBounds，mybatis就会自动为你分页，这个就厉害了。

List getPromoterList(BaseConditionVO vo,RowBounds createRowBounds);

sql语句，这里的关键点是必须要回传id（m.uid as id）到select2.

<select id="getPromoterList" resultType="hashmap" parameterType="map">
    select
    m.uid as id,convert(m.username,char) username,m.realname,m.children_count,m.headimgUrl
    from
    members m
    where m.deleteflag=0
    <if test="mo.username != ''">and m.username like CONCAT('%','${mo.username}','%')</if>

    <choose>
        <when test="orderField !=null and orderField !=''">
            ORDER BY ${orderField}
            <if test="orderDirection != null and orderDirection != ''">${orderDirection}</if>
        </when>
        <otherwise>
            order by m.username DESC
        </otherwise>
    </choose>
</select>

你是不是没看见mysql的分页limit，嗯，这里无须关注，这就是框架要为我们做的事情。

总数

int searchPromoterTotalCount(BaseConditionVO vo);

count(0)就好

<select id="searchPromoterTotalCount" resultType="java.lang.Integer" parameterType="map">
    select count(0) as a
    from
    members m
    where m.deleteflag=0 
    <if test="mo.username != ''">and m.username like CONCAT('%','%')</if>
</select>

out输出到response中

protected void out(Object result,HttpServletResponse response) throws IOException {
    ServletOutputStream out = response.getOutputStream();

    ObjectMapper objectMapper = new ObjectMapper();
    objectMapper.writeValue(out,result);
    out.flush();
}

到这，select2的remote功能在代码部分就完全贴出来完了。
不过，我最后还是要强调几个点：

1.分页的参数Java端和select2一定要对照起来。
2.回传的数据一定要传递一个id回来，否则回来的列表不能选中，为什么呢？调查select2的源码可以知道。

Results.prototype.option = function (data) {
    var option = document.createElement('li');
    option.className = 'select2-results__option';

    var attrs = {
      'role': 'treeitem','aria-selected': 'false'
    };

    if (data.disabled) {
      delete attrs['aria-selected'];
      attrs['aria-disabled'] = 'true';
    }

// id为空的情况下，删除的aria-selected，而aria-selected恰好又是列表选中的关键属性。
// 这个就是个坑，只能这么说，select2给出的api上完全不讲这点，我去！！！！！！！
    if (data.id == null) {
      delete attrs['aria-selected'];
    }
    ......
}

3.form表单如何获取select2的值？答案是，1.返回结果集必须有id，2.input标签上必须要name属性。
4.如何自定义inputMessage呢？

在select2.js中找到以下代码，注意注释部分

S2.define('select2/data/minimumInputLength',[

],function () {
  function MinimumInputLength (decorated,$e,options) {
    this.minimumInputLength = options.get('minimumInputLength');
    // inputMessage
    this.inputMessage = options.get('inputMessage');

    decorated.call(this,options);
  }

  MinimumInputLength.prototype.query = function (decorated,params,callback) {
    params.term = params.term || '';

    if (params.term.length < this.minimumInputLength) {
      this.trigger('results:message',{
        message: 'inputTooShort',args: {
          minimum: this.minimumInputLength,input: params.term,inputMessage : this.inputMessage,// inputMessage，传递给i18n
          params: params
        }
      });

      return;
    }

    decorated.call(this,callback);
  };

  return MinimumInputLength;
});

select2.js中defaults中增加上inputMessage

this.defaults = {
    ...
      minimumInputLength: 0,inputMessage: '',maximumInputLength: 0,...
    };

然后在zh-CN.js文件中修改inputTooShort方法

inputTooShort : function(e) {
    if (e.inputMessage) {
        return e.inputMessage;// 增加inputMessage
    } else {
        var t = e.minimum - e.input.length,n = "请再输入至少" + t + "个字符";
        return n
    }

},

到这里嘛，真的该结束了。

欢迎关注我的公众号，给灵魂片刻安静！

微信扫一扫下方二维码即可关注 沉默王二 公众号：

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

$.AJAX()方法中的PROCESSDATA参数
$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方法的时候参数processData默认为true(该方法为jQuery独有的) 默认情况下会将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded 如果想发送不
form表单提交的几种方式
form表单提交的几种方式 表单提交方式一：直接利用form表单提交 html页面代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot; /&gt; &lt;title&gt;Ins
AJAX应用之注册用户即时检测
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示。常见的用户注册是用户输入用户名，后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示（当用户注册重名时将返回重新注册），或者稍微人性化一点就是在用户名文本框后添加一个检测按钮，让用户检测后再做注册。以上操作，对于用户体验方面来说是比较“差劲”的，一个很好的用户体验就是：当用户输入完注册用户名后，Web系统应能即时检查并即时_用户注册 实时异步检测
详谈基于JSON的高级AJAX开发技术
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在客户端和服务器之间创建复杂的JSON数据传输层。一、 引言毫无疑问，AJAX已经成为当今Web开发中一种强有力的用户交互技术，但是它的许多可能性应用仍然鲜为人知。在本文中，我们将来共同探讨如何 使用JavaScript对象标志(JSON)和JSON分析器在服务器和客户端AJAX引擎之间创建复杂而强有力的JSON数据传输层。我们将_ajax技术可行性
手写的ajax分页控件
文章浏览阅读2.2k次。/************************** 创建XMLHttpRequest对象 **************************/function CreateRequest(){ var xmlObj = null; try { xmlObj = new XMLHttpRequest(); } catch(e) {
AJAX中同时发送多个请求XMLHttpRequest对象处理方法
文章浏览阅读3.7k次。在ajax应用中，通常一个页面要同时发送多个请求，如果只有一个XMLHttpRequest对象，前面的请求还未完成，后面的就会把前面的覆盖 掉，如果每次都创建一个新的XMLHttpRequest对象，也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池，如果池里有 空闲的对象，则使用此对象，否则将创建一个新的对象。下面是我最近写的一个简单的类：* XMLHttpReques_xmlhttprequest发送多个请求
Ajax 同一页面同时执行多个 XMLHTTP
文章浏览阅读3.1k次。Ajax 同一页面如何同时执行多个 XMLHTTP 呢，比如博客页，需要同时利用 Ajax 读取作者信息、文章信息、评论信息……我们的第一反应可能是创建多个全局 XMLHTTP 对象，但这并不现实。其实实现方式非常简单，就是给 onreadystatechange 对应的回调函数加上参数，以下代码是解决方案中一个函数中的一段代码。xmlhttp.open("GET", "ajax_proc_ajax响应多个mxl文件
简单介绍数据岛使用方法
文章浏览阅读1.5k次。数据岛指的是存在Html网页中的xml代码段，它在Html中形成了一个数据的集合，数据岛允许我们在Html网页中集成xml，对xml编写脚本.数据岛有它特有的形式，由标记xml开始，在开始标记中要有一个ID属性，用于指定该指定数据岛的名称。 (当然要以/xml结束).元素xml包含的内容就是xml代码。数据岛也分为2种：1）内嵌的数据岛形式2）外嵌的数据岛形式说了那么多废话，还_数据中岛计算模式
AJAX 框架 用 Asp.net ajax 还是 Jquery ?
文章浏览阅读2.1k次。AJAX 流行之后，总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NET AJAX 并不包括在 AJAX 框架之中。刚开始学了 JQuqery， 众多的 $get(),...等等符号早已把我搞晕了。暂时就放弃了。后来学习 ASP.NET AJAX ，在微软的领导下，逐渐由服务器端转向客户端编程。 激起我客户端编程的兴趣，才想起学习一下了 Jquery. 随着WEB2._jquery ajax asp.net 认证
轻便的XMLHttpRequest应用函数：downloadUrl()
文章浏览阅读1.7k次。前段时间在用google map api的函数库的时候，发现里面的downloadUrl函数非常好用，所以自己写了一个。用腻了那些什么框架什么池，到头来发现越简单的东西越是适合我这种懒人。downloadUrl(url, callback, data);参数说明： url不用说了; callback是回调函数，函数调用的时候会有两个参数：data, responseCode，data就_xmlhttprequest downloadurl
利用XMLHTTP无刷新自动实时更新数据
文章浏览阅读956次。前些时间写了几篇关于XMLHTTP运用的实例.(可以到http://dev.csdn.net/user/wanghr100看之前的几编关于XMLHTTP的介绍.)近来看论坛上经常有人提问关于如何无刷新,自动更新数据.传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.但是,对于一些时效性很强的网站.传统的这种做法是不能满足的.我们可以让程序自动刷新.定时_后端xml怎么实现数据有救新增,没有就更新
AJAX设计模式 XMLHttpRequest调用
文章浏览阅读3.3k次。 XMLHttpRequest调用XMLHttpRequest Call ●●●调用，回调，下载，抓取，实时，查询，远程通信（Remoting），远程通信脚本（RemoteScripting），同步，上传，XMLHttpRequest图6-2：XMLHttpRequest调用 目标故事Reta正在一个批发商网站上购买商品。每次她添加一个商品到购物车时，web站点发出_createxmlhttpre
用javascript动态更改DropDownList下拉项
文章浏览阅读1.3k次。function clearitem(){ var drp1 = document.getElementById("drp1"); while(drp1.options.length>0) { drp1.options.remove(0); } }//动态更改方法（根据城市代码取得该市商业区并添加到DropDownList中_dropdownlist根據動態變化
微調一下 Json.net ，讓他可以序列基本型別
文章浏览阅读1.9k次。因為 Json.net 是有附原始碼的，他也附了單元測試的專案，底下是我額外增加的UnitTest，我的目標就是讓底下的測試可以pass，而且原來的Test 也要都能通過。 ValueTypeTest.csusing System;using NUnit.Framework;namespace Newtonsoft.Json.Test { [TestFixture] public cl_vb 無效的 json 基本型別
利用XMLHTTP无刷新获取数据
文章浏览阅读844次。利用XMLHTTP无刷新获取数据. 客户端和服务器端数据的交互有几种方法.1.提交,通过提交到服务器端.也称"有刷新"吧.2.通过XMLHTTP无刷新提交到服务器端,并返回数据.也称"无刷新"吧.利用XMLHTTP我们可以实现很多很强大的应用.这文章主要介绍它的一些简单的应用.附:因为XMLHTTP是IE5.0+支持的对象.所以你必须要有IE5.0+才能看到效果.client.htm_xmlhttp取源码没有更新
.Net 底下，Json 相關套件的限制
文章浏览阅读1.8k次。Json.Net 無法序列基本型別(string, int)，Asp.Net Ajax 無法正確序列日期，AjaxPro序列出我不想要的_type字串 1. Json.Net 是我最常使用的序列/反序列json套件，標榜速度快，對於一對多關係的object 也都能正常運作, 己能滿足我平日的需要，但前幾天突然有個情況，我要序列的是一個泛型參數，該參數不一定是物object型別，有可能是st_token string in state start
编写组件，使用JavaScript更新UpdatePanel (转载)
文章浏览阅读1.3k次。转载自：http://www.cnblogs.com/JeffreyZhao/archive/2007/01/31/update_the_updatepanels_by_js.html众 所周知，UpdatePanel是通过Trigger来更新的。被设定为Trigger的控件在PostBack之后会被客户端所截获，并且使用 XMLHttpRequest对象发送内容，然后服务器端由ScriptMan_web.ui.updatepanel 和 updatepanel 的区别
无刷新网页——数据岛技术应用
文章浏览阅读1.9k次。有些时候，只是需要更新页面的一个部分甚至只是更新中间的几个数据却需要从服务器DOWN整个页面，导致各种资源的浪费。使用数据岛技术可以很好的解决这个问题：通过定时器或用户事件触发数据岛（XML对象）象服务器获取数据，在数据获取完成后，适时更新相关数据。示例HTML部分：http://localhost/WebService/LoadData/FeaturedService.asmx/GetScore_web数据岛
构建pool管理无刷新页面的xmlhttp对象
文章浏览阅读1k次。在页面上使用ActiveXObject的代价是很大的，如果我们的无刷新页面使用xmlhttp技术，我们或许需要频繁的建立xmlhttp对象，当然 我们也可以使用全局变量来cache一个xmlhttp对象实例。但是这样的方法适合于同步方式xmlhttp通信，而对于异步方式xmlhttp通信将 会出现问题。由于没有了进程的堵塞，用户可能再次调用同一个xmlhttp实例，如果这时前一个通信未完成，那么就
Lightbox JS v2.0
文章浏览阅读998次。 by Lokesh Dhakar 译: croc查看原文概要：Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.最新更新 Version 2.0 图片集: 分组相关的图片并且能轻松的导航它们 视觉特效: 奇特的自适应调整 向后兼容: yes! 点击这里查看实例_on lightbox 2 by lokesh dhakar
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot