jQuery插件select2利⽤ajax⾼效查询⼤数据列表（可搜索、可分页）
select2是⼀款jQuery插件，是普通form表单select组件的升级版。
可以定制搜索、远程数据集（Remote data，本篇主要介绍点）、⽆限滚动（数据分页功能，这⼀点很妙）、还有很多⾼端的参数设置（有需要的下次介绍）。
内置了40种国际化语⾔，不过这⾥我们只需要⽤到中⽂。
同时⽀持现代和传统浏览器内置，甚⾄包括惹⼈不⾼兴的IE8。
那么，现在让我们开始⼀段select2的奇幻之旅吧！
⼀、惊艳的效果，来⼀睹为快吧
本地实战结果
连续使用switch语句⼆、导⼊css和js到⽹站上
1.使⽤CDN，节省⾃⼰⽹站的流量
<link href="cdnjs.cloudflare/ajax/libs/select2/4.0.3/css/select2.min.css" rel="external nofollow" rel="stylesheet" />
<script src="cdnjs.cloudflare/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
2.下载⽂件到本地，可以做⼀些个性的定制（⽐如说修改提⽰语）
<!-- select2 -->
<link rel="stylesheet" type="text/css" href="${ctx}/common/select2/css/select2.css" rel="external nofollow" />
<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}" rel="external nofollow" inputMessage="请输⼊会员编号(可部分匹配)">
<option selected="selected" value="666">沉默王⼆</option>
</select>
Java端通过name属性可获得select的value值。
设置class为js-data-example-ajax，页⾯加载时对该组件进⾏select2的初始化。
href属性为ajax提供后台检索的URL。
style设置组件的宽度。
inputMessage属性定制个性化的提⽰语，默认的英⽂版为Please enter 1 or more characters，中⽂国际化为“请再输⼊⾄少1个字符”，都不太能满⾜个性化需求，所以需要改，后⾯介绍。
提供⼀个默认的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 : , // 搜索框内输⼊的内容，传递到Java后端的parameter为username
page : params.page,// 第⼏页，分页哦
rows : 10// 每页显⽰多少⾏
};
},
// 分页spice仿真
processResults : function(data, params) {
params.page = params.page || 1;
return {
results : data.data,// 后台返回的数据集
pagination : {
more : params.page < al// 总页数为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)
;
var markup = repo.username;
markup += alname;
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 (alname) {
markup += "<div class='select2-result-repository__description'>" + alname + "</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) {
alname || ;
}// 列表中选择某⼀项后显⽰到⽂本框的内容
});
});
});
</script>
第三步、Java端接收参数并返回结果集，不⽤我强调，这步很重要
@RequestMapping(value = "loadMembersInfo")
public void loadMembersInfo(HttpServletRequest request, HttpServletResponse response) throws IOException {
span ofInteger uid = StrUtil.Parameter("uid"));
Members mem = berService.selectByPrimaryKey(uid);
// 分页参数的转换，需要和前台select2进⾏匹配，下⽂放代码
BaseConditionVO vo = getBaseConditionVOForTable(request);
vo.addParams("username", Parameter("username")));
vo.addParams("uid", uid);
// 封装结果集，和前台select2也是匹配的。
PageGrid page = PromoterList(vo, vo.createRowBounds()), vo,
// 以json格式写⼊到response
out(page, response);
}
接下来，把关键的源码贴出来，可能和你的项⽬不吻合，但可以参考。
BaseConditionVO.Java
public class BaseConditionVO {
public final static int PAGE_SHOW_COUNT = 50;
mysql查询某个时间段的数据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) {
}
public String getOrderDirection() {
return "desc".equals(orderDirection) ? "desc" : "asc";
}
public void setOrderDirection(String orderDirection) {
}
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
}
public int getStartIndex() {
int pageNum = PageNum() > 0 ? PageNum() - 1 : 0;
return pageNum * NumPerPage();
}
public RowBounds createRowBounds() {
RowBounds ro = new StartIndex(), NumPerPage());
return ro;
}
/**
* @Title: addParams
* @Description: 添加查询条件
* @param key
* @param value
*/
public void addParams(String key, Object value) {
}
/**
* @Title: getParams
* @Description: 获取查询条件
* @param key
* @return
*/
public Object getParams(String key) {
Mo().get(key);
}
/**
* @return the mo
*/
public Map<String, Object> getMo() {
jquery下载文件请求return mo;
}
/**
* @param mo
* the mo to set
*/
public void setMo(Map<String, Object> mo) {
< = mo;
}
}
selec2的分页和Java端分页参数匹配
protected BaseConditionVO getBaseConditionVOForTable(HttpServletRequest req) { BaseConditionVO vo = new BaseConditionVO();
// 当前页
int currentPage = StrUtil.Parameter("page"));
// ⼀页显⽰多少⾏
int sizes = StrUtil.Parameter("rows"));
// 排序
String sortOrder = Parameter("sord"));
String sortCol = Parameter("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的sults匹配
private List data;
public int getPage() {
return this.page;
}
public void setPage(int page) {
this.page = page;
}
public int getTotal() {
al;
}
public void setTotal(int total) {
}
public int getRecords() {
ds;
}
public void setRecords(int 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();
// 数据
unicode字符大全商标pageGrid.setData(list);
/
/ 当前页
pageGrid.PageNum());
// 总数⽬
pageGrid.setRecords(list.size());
// 总页数
int total = 0;
if (Records() != 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.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('%', '${mo.username}', '%')</if>
</select>
out输出到response中
protected void out(Object result, HttpServletResponse response) throws IOException {
ServletOutputStream out = OutputStream();
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 = ateElement('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 = ('minimumInputLength');
// inputMessage
this.inputMessage = ('inputMessage');
decorated.call(this, $e, options);
}
MinimumInputLength.prototype.query = function (decorated, params, callback) {
< = || '';
if (length < this.minimumInputLength) {
message: 'inputTooShort',
args: {
minimum: this.minimumInputLength,
input: ,
inputMessage : this.inputMessage, // inputMessage，传递给i18n
params: params
}
});
return;
}
decorated.call(this, params, 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
}
},
以上所述是⼩编给⼤家介绍的jQuery插件select2利⽤ajax⾼效查询⼤数据列表（可搜索、可分页），希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论