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

本文涉及的产品
云原生大数据计算服务 MaxCompute,5000CU*H 100GB 3个月
云原生大数据计算服务MaxCompute,500CU*H 100GB 3个月
简介: 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);
}


相关实践学习
基于MaxCompute的热门话题分析
本实验围绕社交用户发布的文章做了详尽的分析,通过分析能得到用户群体年龄分布,性别分布,地理位置分布,以及热门话题的热度。
SaaS 模式云数据仓库必修课
本课程由阿里云开发者社区和阿里云大数据团队共同出品,是SaaS模式云原生数据仓库领导者MaxCompute核心课程。本课程由阿里云资深产品和技术专家们从概念到方法,从场景到实践,体系化的将阿里巴巴飞天大数据平台10多年的经过验证的方法与实践深入浅出的讲给开发者们。帮助大数据开发者快速了解并掌握SaaS模式的云原生的数据仓库,助力开发者学习了解先进的技术栈,并能在实际业务中敏捷的进行大数据分析,赋能企业业务。 通过本课程可以了解SaaS模式云原生数据仓库领导者MaxCompute核心功能及典型适用场景,可应用MaxCompute实现数仓搭建,快速进行大数据分析。适合大数据工程师、大数据分析师 大量数据需要处理、存储和管理,需要搭建数据仓库?学它! 没有足够人员和经验来运维大数据平台,不想自建IDC买机器,需要免运维的大数据平台?会SQL就等于会大数据?学它! 想知道大数据用得对不对,想用更少的钱得到持续演进的数仓能力?获得极致弹性的计算资源和更好的性能,以及持续保护数据安全的生产环境?学它! 想要获得灵活的分析能力,快速洞察数据规律特征?想要兼得数据湖的灵活性与数据仓库的成长性?学它! 出品人:阿里云大数据产品及研发团队专家 产品 MaxCompute 官网 https://www.aliyun.com/product/odps&nbsp;
相关文章
|
6月前
|
前端开发 JavaScript
js + ajax实现商品列表页到详情页的跳转
js + ajax实现商品列表页到详情页的跳转
|
存储 SQL 分布式计算
大数据技术栈列表
大数据技术栈列表
173 0
|
前端开发
JavaWeb15(AJAX+JSON实现无刷新分页)
JavaWeb15(AJAX+JSON实现无刷新分页)
|
2天前
|
存储 缓存 大数据
大数据列表删除的缺点
【10月更文挑战第23天】
13 6
|
3天前
|
大数据 数据挖掘
大数据中列表删除(Listwise Deletion)
【10月更文挑战第22天】
20 4
|
2天前
|
存储 数据采集 大数据
大数据列表删除的优点
【10月更文挑战第23天】
7 2
|
2天前
|
数据采集 大数据 数据安全/隐私保护
大数据列表删除的定义
【10月更文挑战第23天】
8 1
|
26天前
|
存储 分布式计算 NoSQL
大数据-40 Redis 类型集合 string list set sorted hash 指令列表 执行结果 附截图
大数据-40 Redis 类型集合 string list set sorted hash 指令列表 执行结果 附截图
24 3
|
6月前
|
存储 分布式计算 大数据
MaxCompute产品使用合集之MaxCompute是否 支持导出所有表结构和表列表
MaxCompute作为一款全面的大数据处理平台,广泛应用于各类大数据分析、数据挖掘、BI及机器学习场景。掌握其核心功能、熟练操作流程、遵循最佳实践,可以帮助用户高效、安全地管理和利用海量数据。以下是一个关于MaxCompute产品使用的合集,涵盖了其核心功能、应用场景、操作流程以及最佳实践等内容。
|
5月前
|
机器学习/深度学习 分布式计算 DataWorks
MaxCompute产品使用问题之在dataworks中,如何查看所有的udf和resouce列表
MaxCompute作为一款全面的大数据处理平台,广泛应用于各类大数据分析、数据挖掘、BI及机器学习场景。掌握其核心功能、熟练操作流程、遵循最佳实践,可以帮助用户高效、安全地管理和利用海量数据。以下是一个关于MaxCompute产品使用的合集,涵盖了其核心功能、应用场景、操作流程以及最佳实践等内容。