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

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

切记

如果后台返回的数据当中没有id,那么select2是无法选中的,所以切记!!!!!

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

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

select2,利用ajax高效查询大数据列表(可搜索、可分页)_第1张图片
select2,利用ajax高效查询大数据列表(可搜索、可分页)_第2张图片
select2,利用ajax高效查询大数据列表(可搜索、可分页)_第3张图片

本地实战结果
select2,利用ajax高效查询大数据列表(可搜索、可分页)_第4张图片

二、导入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下载地址


<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组件化,注释写得很详细了哦


                    
                    

你可能感兴趣的:(大前端)