首页 / JQUERY / jQuery插件select2利用ajax高效查询大数据列表

jQuery插件select2利用ajax高效查询大数据列表

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery插件select2利用ajax高效查询大数据列表，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11476字，纯文字阅读大概需要17分钟。

内容图文

select2是一款jQuery插件，是普通form表单select组件的升级版。本文主要和大家介绍jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页），需要的的朋友参考下吧，希望能帮助到大家。

可以定制搜索、远程数据集（Remote data，本篇主要介绍点）、无限滚动（数据分页功能，这一点很妙）、还有很多高端的参数设置（有需要的下次介绍）。

内置了40种国际化语言，不过这里我们只需要用到中文。

同时支持现代和传统浏览器内置，甚至包括惹人不高兴的IE8。

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

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

jQuery插件select2利用ajax高效查询大数据列表 - 文章图片

本地实战结果

jQuery插件select2利用ajax高效查询大数据列表 - 文章图片

二、导入css和js到网站上

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="external nofollow" 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" 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" style="width:400px" 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 : 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 = "<p class='select2-result-repository clearfix'>" + "<p class='select2-result-repository__avatar'><img src='"
       + repo.headimgUrl + "' /></p>" + "<p class='select2-result-repository__meta'>"
       + "<p class='select2-result-repository__title'>" + repo.username + "</p>";
     if (repo.realname) {
      markup += "<p class='select2-result-repository__description'>" + repo.realname + "</p>";
     }
     markup += "<p class='select2-result-repository__statistics'>"
       + "<p class='select2-result-repository__forks'><i class='fa fa-user'></i> 下级会员数" + repo.children_count + " </p>"
       + "</p>" + "</p></p>";
     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('%', '${mo.username}', '%')</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, $e, 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, 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高效查询大数据列表全部内容，希望文章能够帮你解决jQuery插件select2利用ajax高效查询大数据列表所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

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

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/296210.html

来源：【匿名】

【上一篇】jQueryValidate校验多个相同name实例分享【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【jQuery插件select2利用ajax高效查询大数据列表】教程文章相关的互联网学习教程文章

jquery插件开发尝试（二）【代码】【图】

经过上次的尝试，已初步掌握jquery插件的写法，下面为模拟jquery UI插件的效果：html:<!DOCTYPE html> <html><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0,minimun-scale=1.0 maximum-scale=1.0, user-scalable=no" name="viewport"/><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"/><title>jquery menu插...

jQuery插件之validate【代码】【图】

一、jQuery.validate.js插件用于对表单输入进行验证，其使用配置非常简单。支持多事件触发，自带多种验证规则，还支持自定义验证规则。　　1、配置方法。　　先导入jQuery库，然后导入Validate插件，如果是中文提示还需要导入messages_zh.js。　　注意Validate的导入要在jQuery库之后。代码如下： <script src="jQuery.1.8.3.js" type="text/javascript"></script><script src="jquery.validate.js" type="text/javascript"><...

jquery插件开发模板【代码】

jquery插件，表单验证validation plugin的使用【代码】

笔记：一、首先引入插件 <script type="text/javascript" src="js/jquery-1.10.0.js" ></script><script type="text/javascript" src="js/jquery.validate-1.13.1.js" ></script>列子：一个简单的登录表单验证 1<form id="loginForm"> 2<label for="userName">用户名：</label> 3<input type="text" id="user" name="userName"/> 4<br /><br /> 5<label for="passWord">密码：</label> 6<input type="password" id="passWord" nam...

程序员们必备的10款免费jquery插件

本周带来10款免费的jquery插件。如果你也有好的作品，欢迎分享到社区中来，在得到帮助的同时，也能与更多人分享来自你的作品。jQuery导航菜单置顶插件 - stickyUp 。在线演示stickyUp是一款可以帮助你生成置顶效果的jquery插件，如果你希望生成一个固定页面顶端的导航效果，可以使用stickUp来快速生成。非常实用的回弹菜单在线演示这是一款实用型的菜单插件，可以用在很多地方，点击链接可以查看到在线演示并获得免费下载。使用jQu...

jQuery插件——下拉选择框【代码】

其实，之前也写过jQuery插件，今天写的是一个模拟select选择的下拉插件。既然是jQuery插件，那么必然是依赖jQuery的了。老规矩，直接上代码吧！;(function () {$.fn.extend({dropdown:function (options) {return this.each(function (i, val) {$(val).css("position", "relative");// 设置默认参数var opts = $.extend({color: "#28c4ff",items: [{key1: "选项一"},{key2: "选项二"},{key3: "选项三"},{key4: "选项四"},{key5: "选...

js网页雪花效果jquery插件

1，使用前先导入jquery类库 2，导入雪花特效js类库 jq.snow.min.js 3，初始化代码 <script>$(function(){$.fn.snow({minSize : 5, //雪花的最小尺寸默认5maxSize : 40, //雪花的最大尺寸默认40newOn : 200, //雪花出现的频率这个数值越小雪花越多默认200showStyle : 0, //雪花样式1~17，默认是0flakeColor : ‘#FFFFFF‘, //雪花颜色默认白色 #FFFFFFspeed : 15 //雪花下降速度默认15}...

jquery插件-表单验证插件-demo【代码】

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>rules</title><script type="text/javascript" src="../js/jquery-1.12.1.js"></script><script type="text/javascript" src="../js/validation/jquery.validate.js"></script><script type="text/javascript" src="../js/validation/additional-methods.js"></script><script type="text/javascript" src="../js/validation/messages_zh.js"></script><script type="tex...

【jQuery插件】使用cropper实现简单的头像裁剪并上传【代码】

插件介绍这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件，当时想实现用户资料的头像上传功能，并且能够预览图片，和对图片进行简单的裁剪、旋转，花了不少时间才看到了这个插件，感觉功能挺全面，代码实现起来也挺简单，再加上用的是Bootstrap，对移动端操作也有适配，于是就用了。现在稍微有点时间就记录一下，方便以后再用的时候查阅。另外也有对应的js版本。官方文档（英文）jQuery GitHub项目地址官方示...

jQuery插件开发【代码】

1. 插件的种类编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率。jQuery的插件主要分为三种类型:1.封装对象方法的插件;2.封装全局函数的插件;3.选择器插件;1.1 封装对象方法的插件这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常用的一种插件。95%以上的jQuery插件都是封装对象方法的插件。此类插件可以发挥出jQuery选择器的强大优势。...

jQuery插件写法【代码】

jQuery核心的方法有两个：1、$.extend(object)可以理解为jQuery添加一个静态方法。2、$.fn.extend(object)可以理解为jQuery实例添加一个方法。基本的使用$.extend({fun1: function() {alert(11);}})$.fun1();$.fn.extend({fun2: function() {alert(22);}})$(this).fun2();//等同于$.fn.fun3 = function() {alert(33);}$(this).fun3();jQuery(function() {})与(function($) {})(jQuery)的区别1、jQuery(function() {})相当于$(docum...

jQuery插件开发全解析

jQuery插件的开发包括两种：一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。1、类级别的插件开发类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。...

支持10种格式的 HTML 表格导出 jQuery 插件【图】

HTML 表格导出 jQuery 插件可以帮助用户导出 HTML 表格到 JSON、XML、PNG、CSV、TXT、SQL、MS-Word、MS-Excel、MS-PowerPoint 和 PDF 格式。您可以轻松地设置字体大小，分隔符，导出类型等。您可能感兴趣的相关文章Web 开发中很实用的10个效果【附源码下载】精心挑选的优秀jQuery Ajax分页插件和教程12款经典的白富美型 jQuery 图片轮播插件让网站动起来！12款优秀的 jQuery 动画插件精心挑选的美轮美奂的 jQuery 图片特效插件立...

jQuery插件开发，jquery插件【代码】

关于jQuery插件的开发自己也做了少许研究，自己也写过多个插件，在自己的团队了也分享过一次关于插件的课。开始的时候整觉的很复杂的代码，现在再次看的时候就清晰了许多。这里我把我自己总结出来的东西分享出来，帮助那些和我一样曾经遇到过同样问题的人。我要做什么我想要得到的javascript 插件应该会有以下几个特征* 以下的代码均假设存在 jQuery 插件的第一形态面对这种情况，通常我们会通过定义function的方式来实现。functio...

分享一个jquery插件,弥补一下hover事件的小小不足【代码】

hover事件有一个缺点:当你的鼠标无意划过一个dom元素(瞬间划过,这个时候用户可能不想触发hover事件),会触发hover事件应该设置一个时差来控制hover事件的触发比如jd左边的菜单你用鼠标瞬间划过他子菜单会弹出然后立即消失, 用户体验非常的不好.易迅的菜单就没有这个问题delayHover来解决这个问题啥也不说了先看调用…………………………调用方式:var duration = 500;// 延迟500毫秒 $(‘#div1‘).delayHover(function () {$(this)....

首页 / JQUERY / jQuery插件select2利用ajax高效查询大数据列表

jQuery插件select2利用ajax高效查询大数据列表

内容导读

内容图文

内容总结

内容备注

内容手机端

【jQuery插件select2利用ajax高效查询大数据列表】教程文章相关的互联网学习教程文章

jquery插件开发尝试（二）【代码】【图】

jQuery插件之validate【代码】【图】

jquery插件开发模板【代码】

jquery插件，表单验证validation plugin的使用【代码】

程序员们必备的10款免费jquery插件

jQuery插件——下拉选择框【代码】

js网页雪花效果jquery插件

jquery插件-表单验证插件-demo【代码】

【jQuery插件】使用cropper实现简单的头像裁剪并上传【代码】

jQuery插件开发【代码】

jQuery插件写法【代码】

jQuery插件开发全解析

支持10种格式的 HTML 表格导出 jQuery 插件【图】

jQuery插件开发，jquery插件【代码】

分享一个jquery插件,弥补一下hover事件的小小不足【代码】

SELECT2 - 相关标签

JQUERY - 相关标签

AJAX - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程