select2,利用ajax高效查询大数据列表 1(可搜索、可分页)-阿里云开发者社区

开发者社区> 沉默王二> 正文

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

简介: select2,利用ajax高效查询大数据列表(可搜索、可分页)
+关注继续查看

select2是一款jquery插件,是普通form表单select组件的升级版。

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

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

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


切记:


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

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


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

image.png



本地实战结果

image.png


二、导入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>


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 = "<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);
}


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
7238 0
MySQL---数据库从入门走向大神系列(十六)-JavaWeb分页技术实例演示1
分页,是一种将所有数据分段展示给用户的技术.用户每次看到的不 是全部数据,而是其中的一部分,如果在其中没有找到自己想要的内容,用户可以通过指定页码或是点上/下一页的方式进行翻页。 本例演示静态分页,也就是先设置好每页显示10行,再根据总行数,来算出总页数,将所有页数的页号都显示出来。
914 0
bboss数据库标签系列一 分页列表详细信息标签预编译sql查询数据
本系列文章详细介绍bboss标签库的数据库标签具体使用方法,涉及到的功能包括: db查询(普通查询、预编译查询,分页查询),db新增、修改、删除、批处理操作(预编译)。 bboss数据库标签系列一 分页列表详细信息标签预编译sql查询数据 beaninfo标签,pager标签,list标签预编译sql获取数据功能相关属性和标签: sqlparamskey-指定将绑定变量参数存储在request 属性集中的变量名称,以便pager,beaninfo,list标签获取sql的绑定变量参数值。
764 0
记一次Mysql大数据分页优化问题
记一次Mysql大数据分页优化问题
8 0
<select multiple="multiple"> 数据回显
var names = yunying_name.split(","); for (var i = 0; i < names.length; i++) { names[i] = names[i].
1169 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载