jQuery插件select2使用ajax高效查询大数据列表(可搜索和分页)

Select2是一个jQuery插件，是普通表单表单的Select组件的升级版。

可以自定义搜索、Remote数据集(本文主要介绍)、无限滚动(数据分页功能，很精彩)，还有很多高端参数设置(需要下次介绍)。

内置40种国际语言，但这里我们只需要用中文。

它还支持内置的现代和传统浏览器，甚至包括令人不快的IE8。

所以，现在让我们开始选择2的奇妙旅程吧！

首先，惊人的效果，让我们快速看一下

局部实战结果

第二，将css和js导入网站

1.使用CDN来节省您网站上的流量

link href=' https://cdnjs . cloud flare.com/Ajax/libs/select 2/4 . 0 . 3/CSS/select 2 . min . CSS ' rel=' external no follow ' rel='样式表'/Script src=' http :https://cdnjs . cloud flare.com/Ajax/libs/select 2/4 . 0 . 3/js/select 2 . min . js '/Script 2。本地下载文件，可以做一些个性化定制(比如修改提示)

Git下载地址

！- select2 - link rel='样式表' type=' text/CSS ' href=' $ { CTX }/common/select 2/CSS/select 2 . CSS ' rel=' external no follow '/script type=' text/JavaScript ' src=' http : $ { CTX }/common/select 2/js/select 2 . full . js '/script！-中文国际化也需要参数设置-脚本类型=' text/JavaScript ' src=' http : $ { CTX }/common/select 2/js/i18n/zh-cn . js '/脚本三。用真刀来做

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

select name=' parentid ' class=' js-data-example-Ajax ' href=' $ { CTX }/member/loadmembersinfo . do？uid=$ { mem . uid } ' rel=' external no follow ' style=' width :400 px ' input message='请输入成员编号(可以部分匹配)' option selected=' selected ' value=' 666 ' silent king 2/option/selectJava可以通过name属性获取select的值。

将该类设置为js-data-example-ajax，并在加载页面时用select2初始化组件。

href属性为ajax提供了一个在后台检索的URL。

样式设置组件的宽度。

由inputMessage属性定制的个性化提示，默认英文版为请输入1个以上字符，中文国际化为“请至少多输入一个字符”，不能满足个性化要求，需要更改，后面会介绍。提供默认选项，该选项将在检索页面之前显示。

第二步，选择2组件化，注释写得非常详细

脚本类型=' text/JavaScript ' $(function(){ $(' select。js-data-example-Ajax’).每个(function(){ var $ this=$(this)；这个。选择2({ language : ' zh-CN '，//指定语言为中文，国际化才起效输入消息：美元。attr('输入消息')，//添加默认参数Ajax : { URL : $ this。attr(' href ')，dataType : 'json '，延迟： 250,//延迟显示数据：函数(参数){返回{用户名：参数。术语，//搜索框内输入的内容，传递到爪哇后端的参数为用户名页面： params.page，//第几页，分页哦行： 10/每页显示多少行};}, //分页流程结果：函数（数据，参数){ params。page=params。页面| | 1；返回{ results : data.data，//后台返回的数据集分页： {更多参数。页面data.total//总页数为10,那么1-9页的时候都可以下拉刷新} };}，缓存： false }，擒纵标记：函数（标记){返回标记}，//让我们的自定义格式化程序工作minimumInputLength : 1，//最少输入一个字符才开始检索templateResult :函数（回购){//显示的结果集格式，这里需要自己写钢性铸铁样式，可参照演示/正在检索if(回购.加载)返回repo.textvar标记=repo . usernamemarkup=repo . realnamevar标记=' div class='选择2-结果-存储库清除修复' ' ' div class='选择2-结果-存储库_ _ avatar ' img src=' repo。head imgurl ' '//div ' ' div class=' select 2-result-repository _ _ meta ' ' ' ' div class=' select 2-result-repository _ _ title ' ' repo。用户名'/div '；if(回购。实名){ markup=' div class=' select 2-result-repository _ _ description ' ' repo。实名'/div '；}标记=' div class='选择2-结果-存储库_ _统计信息' ' ' div class='选择2-结果-存储库_ _分叉' I class=' fa-用户'/I下级会员数回购。children _ count '/div ' '/div ' '/div/div '；返回标记；}，templateSelection :函数(回购){返回回购。实名| |回购。文本；}//列表中选择某一项后显示到文本框的内容});});});/script第三步、Java端接收参数并返回结果集，不用我强调，这步很重要

@RequestMapping(值=' LoadMemberSinfo ')公共void LoadMemberSinfo(HttpServletrequest请求，HttpServletResponse响应)引发IOException {整数uid=Strateil。ParseStringPoint(请求。getParameter(' uid ')；成员mem=this。memberservice。select by primary key(uid)；//分页参数的转换，需要和前台选择2进行匹配，下文放代码base conditionvo=getbase conditionvofortable(请求);vo.addParams('username '，Strateil)。Getutf8 StrIng(请求。GetParameter(' username '))；vo.addParams('uid '，uid)；//封装结果集，和前台选择2也是匹配的PageGrid page=createPageGrid(这。membermapper。getpromoterlist(vo，vo.createRowBounds())、vo，这个。membermapper。搜索promoteretotalcount(VO))；//以json格式写入到响应输出（页面，响应);}接下来，把关键的源码贴出来，可能和你的项目不吻合，但可以参考。

基本条件VO .Javapublic类base condition VO { public final static int PAGE _ SHOW _ COUNT=50；私有int页数=1；private int number page=0；private int TotalCount=0；私有字符串orderField私有字符串订单方向/* * * @字段ps :对参数类型进行封装*/private MapString，Object mo=new HashMapString，Object()；public int getpage num(){返回页码；} public void setagenum(int page num){ this。页码=页码；} public int GetNumberPage(){ 0返回numPerPage 0？numPerPage : PAGE _ SHOW _ COUNT；} public void setNumBerpage(int NumBerpage){ this。NumBerpage=NumBerpage} public String getOrderField(){ return orderField；} public void setOrderField(字符串顺序字段){ this。订单字段=订单字段；}公共字符串getOrderDirection(){ 0返回desc .等于(orderDirection)？desc ' : ' ASC '；} public void setOrderDirection(字符串顺序方向){ this。订单方向=订单方向；} public int gettotal count(){ return total count；} public void settotal计数(int total计数){ this。总计数=总计数；} public int getStartIndex(){ int page num=this。获取页面num()^ 0？这个。getpage num()-1 : 0；返回页码。getnumperpage()；}公共行边界createrow bounds(){ row bounds ro=新行边界(这。getstartindex()、这个。getnumperpage())；返回ro；}/* * * @ title : addParams * @ description :添加查询条件* @param键* @param值*/public void addParams(字符串键，对象值){ this.getMo().放（键、值);}/* * * @ title : getParams * @ description :获取查询条件* @ param key * @ return */public Object getParams(String key){ return this。getmo().get(key)；}/* * * @返回mo */public MapString，Object getMo(){ 0返回mo；} /** * @param mo *要设置的mo */public void setMo(MapString，Object mo){ this。mo=mo} }选择2的分页和爪哇端分页参数匹配

受保护的BaseConditionVO getBaseConditionVOForTable(HttpServletrequest req){ BaseConditionVO=new BaseConditionVO()；//当前页int CurrentPage=StratIl。ParseStringPoint(请求。getParameter(' page ')；//一页显示多少行int size=StratIl。ParseStringPoint(请求。GetParameter(' row ')；//排序string排序顺序=StrIng。GetStrIng(请求。GetParameter(' sord ')；string排序col=StrIng。GetStrIng(请求。getParameter(' sidx ')；vo.setNumPerPage(大小);VO。设置议程(当前页面)；VO。SetorderField(sort col)；VO。setorderdirection(排序顺序)；返回VO；}Java端到选择2端的数据封装

@ Xstreamias(' PageGrid ')@抑制警告('原始类型')公共类PageGrid { private int page//总页数，和选择2的过程结果。分页匹配私人利息总额；私有（同Internationalorganizations）国际组织记录；//数据结果集，和选择2的过程结果匹配个人分发名单数据；public int GetPage(){返回这个。页面；} public void SetPage(int page){ this。page=page} public int GetTotal(){返回此。总计；} public void setTotal(int total){ this。总计=总计；} public int getRecords(){返回此。记录；} public void setRecords(int records){ this。记录=记录；} public List getData(){返回此。数据；} public void setData(List data){ this。数据=数据；}}MySQL获取的数据源和页面网格进行转换匹配

受保护的页面网格createPageGrid(列表列表，BaseConditionVO，int searchttotal count){ 0页面网格页面网格=新页面网格();//数据pageGrid.setData(列表);//当前页页面网格。设定值。getpage num())；//总数目页面网格。setrecords(列表。size())；//总页数int total=0；if (pageGrid.getRecords()！=0){ total=searchetotalcount % VO。getnumperpage()==0？搜索总计数/VO。getnumperpage():搜索总计数/VO。getnumperpage()1；} pageGrid.setTotal(总计);返回页面网格；}mybatis的分页，超简单，只要设置了创建行边界米巴蒂斯就会自动为你分页，这个就厉害了。

列表GetPromoterList(BaseConditionVo VO，行边界createRowBonds)；结构化查询语言语句，这里的关键点是必须要回传id(m.uid作为id)到选择2。

选择id=' getPromoterList ' resultType=' hashmap '参数类型=' map '选择m.uid作为id，convert(m.username，char) username，m.realname，m.children_count，m.headimgUrl来自成员m，其中m.deleteflag=0如果test='mo.username！=' ' '和m .用户名，如CONcat("% "、" ${mo.username} "、" % ")如果在测试时选择='orderField！=null和orderField！=''' ORDER BY ${orderField}如果测试='orderDirection！=null和orderDirection！=' ' ' ' ' ' ' $ {订单方向}/如果/否则按DESC订购/否则/选择/选择你是不是没看见关系型数据库的分页极限，嗯，这里无须关注，这就是框架要为我们做的事情。

总数

int search promoteretotalcount(BaseConditionvo VO VO)；计数(0)就好

选择id=' search promotertotalcount '结果类型=' Java。朗。“integer”参数TYPe=“map”选择计数(0)作为来自m的成员，其中m.deleteflag=0如果test='mo.username！=' ' '和m .用户名，如CONcat("% "、" ${mo.username} "、" % "/if/select out输出到反应中

受保护的作废(对象结果，HttpServletResponse响应)引发IOException { ServletOutputStream out=响应。getoutputstream()；对象映射器对象映射器=新对象映射器()；objectMapper.writeValue(out，result)；出去。flush()；}到这，选择2的遥远的功能在代码部分就完全贴出来完了。

不过，我最后还是要强调几个点：

1.分页的参数爪哇端和选择2一定要对照起来。

2.回传的数据一定要传递一个编号回来，否则回来的列表不能选中，为什么呢？调查选择2的源码可以知道。

结果。原型。option=function(数据){ var option=document。创建元素(“李”)；选项。类名=' select 2-results _ _ option '；var attrs={ 'role': 'treeitem '，' aria-selected ' : ' false ' }；if(数据。禁用){删除属性[' aria-selected ']；attrs[' aria-disabled ']=' true '；}//id为空的情况下，删除的艾瑞亚精选，而咏叹调精选恰好又是列表选中的关键属性。//这个就是个坑，只能这么说，选择2给出的美国石油学会(美国石油协会)上完全不讲这点，我去！if(数据。id==null){删除属性[' aria-selected ']；} .}3 .形式表单如何获取选择2的值？答案是，1.返回结果集必须有身份证，2号。输入标签上必须要名字属性。

4.如何自定义输入消息呢？

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

S2。define(' select 2/data/minimumInputLength '，[]，function(){ function minimumInputLength(修饰，$e，options){这个。minimumInputLength=选项。get(' minimumInputLength ')；//inputMessage这个。inputMessage=options。get(' inputMessage ')；修饰的。呼叫(这个，$e，选项)；} minimumputlength。原型。查询=函数(修饰、参数、回调){ params。术语=参数。术语| | ' '；if(参数。学期。长度这个。minimum put length){ this。触发器(' results : message '，{ message: ' inputTooShort '，args : { minimum : this。minimuminputlength，input: params.term，输入消息： this。输入消息，//输入消息，传递给i18n params 3360 params } })；返回；}修饰。调用(this、params、callback)；};返回MinimumInputLength })；select2.js中默认中增加上输入消息

this.defaults={.最小值输出长度： 0,输入消息： ' ',最大值输出长度： 0,};然后在zh-CN.js文件中修改输入选择短方法

inputTooShort :函数(e){ if(e .输入消息){ return e .输入消息；//增加输入消息} else { var t=e .最小值-e .输入。长度，n='请再输入至少' t '个字符；返回n }}，以上所述是小编给大家介绍的jQuery插件选择2利用创建交互式、快速动态网页应用的网页开发技术高效查询大数据列表（可搜索、可分页),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！