JAVA前端bootstrap-table表格,全量查数据后也能字段点击排序sort

这篇具有很好参考价值的文章主要介绍了JAVA前端bootstrap-table表格,全量查数据后也能字段点击排序sort。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

工程后期改造,加了一层首页展示,该层无需分页所以想在代码层次实现排序,而不是数据库sql

1、后端代码展示如下

private List<QcCheckStatVO> getQcCheckStatList(Map<String, Object> para, String orderByColumn, String isAsc, int pageNum, int pageSize, boolean isAdmin) throws Exception {
   initializeSearch(para);

   List<QcCheckStatVO> list;
   // 展示的数据集合
   List<QcCheckStatVO> homeDataList = new ArrayList<>(16);
        if (isAdmin) {
            list = baseMapper.selectPageViewList(para);
            // list 以instanceId 分组
            // 将在sql中聚合函数操作放到java中计算
            Map<String, List<QcCheckStatVO>> collect = list.stream().collect(Collectors.groupingBy(o -> o.getInstanceId()));
            for (String s : collect.keySet()) {
                extracted(homeDataList, collect, s);
            }
            // 组装排序字段
            if (StrUtil.isAllNotBlank(orderByColumn, isAsc)) {
                Comparator<QcCheckStatVO> qcCheckStatVOComparator = Comparator.comparing(QcCheckStatVO::getCreateTime).reversed().thenComparing(QcCheckStatVO::getReqFieldErrorCount);
                Map<Key, Comparator<QcCheckStatVO>> map = new HashMap<>(16);
                map.put(new Key("expectCount", SqlKeyword.ASC.getSqlSegment()), Comparator.comparing(QcCheckStatVO::getErrorCount));
                map.put(new Key("expectCount", SqlKeyword.DESC.getSqlSegment()), Comparator.comparing(QcCheckStatVO::getErrorCount).reversed());

                map.put(new Key("actualCount", SqlKeyword.ASC.getSqlSegment()), Comparator.comparing(QcCheckStatVO::getActualCount));
                map.put(new Key("actualCount", SqlKeyword.DESC.getSqlSegment()), Comparator.comparing(QcCheckStatVO::getActualCount).reversed());

                map.put(new Key("errorCount", SqlKeyword.ASC.getSqlSegment()), Comparator.comparing(QcCheckStatVO::getErrorCount));
                map.put(new Key("errorCount", SqlKeyword.DESC.getSqlSegment()), Comparator.comparing(QcCheckStatVO::getErrorCount).reversed());

                map.put(new Key("integrity", SqlKeyword.ASC.getSqlSegment()), Comparator.comparing(QcCheckStatVO::getReqFieldErrorCount));
                map.put(new Key("integrity", SqlKeyword.DESC.getSqlSegment()), Comparator.comparing(QcCheckStatVO::getReqFieldErrorCount).reversed());

                map.put(new Key("foreignRate", SqlKeyword.ASC.getSqlSegment()), Comparator.comparing(QcCheckStatVO::getForeignErrorCount));
                map.put(new Key("foreignRate", SqlKeyword.DESC.getSqlSegment()), Comparator.comparing(QcCheckStatVO::getForeignErrorCount).reversed());
                for (Key key : map.keySet()) {
                    if (key.getField().equalsIgnoreCase(orderByColumn) && key.getDirection().equalsIgnoreCase(isAsc)) {
                        qcCheckStatVOComparator = map.get(key);
                    }
                }
                final List<QcCheckStatVO> sortedList = homeDataList.stream().sorted(qcCheckStatVOComparator).collect(Collectors.toList());
                homeDataList = sortedList;
            }
        } else {
            // 首页不分页,第二层才分页,所以将排序条件加上去
            // 组装排序字段
            String orderBy = "";
            if (StrUtil.isAllNotBlank(orderByColumn, isAsc)) {
                orderBy = " " + EnumExtUtil.getEnumOnValue(QcCheckStatConstants.SortFieldEnum.class, orderByColumn, "key").getValue() + " " + isAsc;
                para.put("sortKey", orderByColumn);
                if (StrUtil.equalsIgnoreCase(SqlKeyword.ASC.getSqlSegment(), isAsc)) {
                    para.put("sortType", SqlKeyword.ASC.getSqlSegment());
                } else {
                    para.put("sortType", SqlKeyword.DESC.getSqlSegment());
                }
            } else {
                if (isAdmin) {
                    orderBy = " REQ_FIELD_ERROR_COUNT asc";
                } else {
                    orderBy = " t1.CREATE_TIME desc ,t1.REQ_FIELD_ERROR_COUNT asc";
                }
            }
            try {
                PageHelper.startPage(pageNum, pageSize, orderBy);
                list = baseMapper.selectPageViewList(para);
                homeDataList = list;
            } finally {
                PageHelper.clearPage();
            }
        }

        if (CollUtil.isEmpty(list)) {
            return new ArrayList<>();
        }

        for (QcCheckStatVO vo : homeDataList) {
            // 前置机名
            if (ProjectConstant.ProjectName.RONGDA_DEQC.equals(projectConfig.getName())) {
                vo.setInstanceName(ConfigUtil.get("deqc.check.instance.name", "未知"));
            } else if (ProjectConstant.ProjectName.RONGDA_DESYS.equals(projectConfig.getName())) {
                final Instance instance = instanceCoreMapper.selectById(vo.getInstanceId());
                if (ObjectUtil.isNotNull(instance)) {
                    vo.setInstanceName(instance.getInstanceName());
                }
            }
            // 判断实传是否为0 有的话,则显示‘异常’
            boolean actualCountErrorFlag = false;
            if (ObjectUtil.isNull(vo.getActualCount()) || vo.getActualCount().equals("0")) {
                actualCountErrorFlag = true;
            }
            vo.setActualCountErrorFlag(actualCountErrorFlag);
            // 完整性
            vo.setIntegrity(StrUtil.format("{}/{}", vo.getReqFieldErrorCount(), vo.getReqFieldCount()));
            // 饱和度
            // 饱和度率
            vo.setSaturation(StrUtil.format("{}/{}", vo.getReqFieldCount(), vo.getReqFieldErrorCount()));
            vo.setSaturationRate(countRate(vo.getReqFieldErrorCount().toString(), vo.getReqFieldCount().toString()));

            // 及时性
            // 及时性率
            if (vo.getActualCount() > 0 && !vo.getActualCountErrorFlag()) {
                vo.setTimeliness("正常");
            } else {
                vo.setTimeliness("异常");
            }

            // 错误率
            final String errorRate = countRate(vo.getErrorCount().toString(), vo.getCheckCount().toString());
            vo.setErrorRate(errorRate);

            // 外键错误率
            final String foreignRate = countRate(vo.getForeignErrorCount().toString(), vo.getCheckCount().toString());
            vo.setForeignRate(foreignRate);
        }


        return homeDataList;
    }

 文章来源地址https://www.toymoban.com/news/detail-584822.html

到了这里,关于JAVA前端bootstrap-table表格,全量查数据后也能字段点击排序sort的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 antd项目实战——table表格的自定义筛选【纯前端filters过滤、自定义筛选table表格数据】

    文章内容 文章链接 vue3 antd table 表格的基础搭建 https://blog.csdn.net/XSL_HR/article/details/128072745 ant design vue 组件库的引入与使用 https://blog.csdn.net/XSL_HR/article/details/127396384 在 后台管理系统 中,我们需要 对大量的数据进行展示、处理和操作 ,table表格也因此无处不在。而 ant design

    2024年01月25日
    浏览(57)
  • 【前端】layui table表格勾选事件,以及常见模块

    欢迎来到《小5讲堂》,大家好,我是全栈小5。 这是《前端》系列文章,每篇文章将以博主理解的角度展开讲解, 温馨提示:博主能力有限,理解水平有限,若有不对之处望指正! 在 layui 的 table 表格中,想要监听勾选事件可以通过监听 checkbox 类型的列实现。 可以使用 ch

    2024年04月22日
    浏览(39)
  • el-table实现纯前端导出(适用于el-table任意表格)

    2023.9.1今天我学习了如何使用el-table实现前端的导出功能,该方法的好处有无论你的el-table长什么样子,导出之后就是什么样子。 1.安装三个插件 npm install file-save npm install xlsx npm install xlsx-style 2.创建Export2Excel.js 3.按需引入 4.vue.config.js引入 效果: 扩展: 当我们会出现这样的表

    2024年02月10日
    浏览(51)
  • 【前端】vue3+ts+vite,el-table表格渲染记录重复情况

    给自己一个目标,然后坚持一段时间,总会有收获和感悟! 在使用vue的过程中,总会遇到一些有疑问的地方,总结就能够加深印象,下次再出现的时候也有个参考的地方。 Element UI 的 el-table 组件是一个强大的表格组件,提供了许多常见的属性来配置和定制表格的外观和行为

    2024年02月04日
    浏览(51)
  • vue纯前端导入excel,获取excel的表格数据渲染el-table

    最近有个需求,最开始列表数据是通过新增按钮一条条添加的,但是部分数据量可能上百条,客户自己手选会很慢,所以产品经理给了个需求要求可以通过上传excle文件进行导入。 经过网上查询及涉及自己项目,实现了此功能。 第一步:安装插件,我安的是0.16.0;原因是默认

    2024年02月16日
    浏览(54)
  • 如何使用Vue实现Excel表格数据的导入,在前端实现Excel表格文件的上传和解析,并使用Table组件将解析出来的数据展示在前端页面上

    随着互联网的发展和社会的进步,各个行业的数据量越来越大,对于数据的处理变得越来越重要。其中,Excel表格是一种重要的数据处理工具。在前后端项目中,实现Excel表格的导入和导出功能也愈加常见。这篇文章将介绍如何使用Vue实现Excel表格数据的导入。 在开始介绍实现

    2024年02月11日
    浏览(66)
  • 【前端vue+elemenui】el-table根据表格数据设置整行样式或单元格样式

    首先需要了解俩个函数,row-class-name、cell-class-name 这里以cell-class-name单元格样式为例 row-class-name 行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。 Function({row, rowIndex})/String cell-class-name 单元格的 className 的回调方法,也可以使用字符串为所有单元

    2024年01月24日
    浏览(53)
  • 前端vue+elementui导出复杂(单元格合并,多级表头)表格el-table转为excel导出

    需求 :前端对el-table表格导出 插件 : npm install xlsx -S npm install file-saver --save 原理 :直接导出el-table的表格里面的数据,这样就会存在缺点,只会导出当前页面的数据,如果需要导出全部数据,可以自己重新渲染一个全部数据不可见的el-table表格,来导出就可以了 扩展 :经过

    2024年02月04日
    浏览(66)
  • Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页

    Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页:         当table的数据量比较大的时候,一个屏幕展示不出全部的数据,这个时候就需要分页显示。而多数情况下都是做的后端分页,就是将分页参数和查询条件一并传到后端,后端将当前页要

    2024年01月20日
    浏览(55)
  • 【JaveWeb教程】(8)Web前端基础:Vue组件库Element之Table表格组件和Pagination分页组件 详细示例介绍

    接下来我们来学习一下ElementUI的常用组件,对于组件的学习比较简单,我们只需要参考官方提供的代码,然后复制粘贴即可。本节主要学习Tbale表格组件和Pagination分页组件 Table 表格:用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。 接下来

    2024年02月02日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包