精华内容
下载资源
问答
  • -- 用个div把两个表格包裹起来,设置相同的最小宽度并最外层的div设置overflow-x: auto;x轴滚动条;注意最小宽度是根据表格内容的多少来决定的 --> <div style="min-width:1366px;"> <...
    <template>
      <div class="merge-box">
        <!-- 用一个div把两个表格包裹起来,设置相同的最小宽度并在最外层的div设置overflow-x: auto;x轴滚动条;注意最小宽度是根据表格内容的多少来决定的 -->
        <div style="min-width:1366px;">
          <Table ref="current"
                 :columns="columns"
                 :data="datas">
          </Table>
        </div>
        <div style="min-width:1366px;">
          <Table :columns="summaryColumn"
                 :data="summaryDatas"
                 :show-header="false"></Table>
        </div>
      </div>
    </template>
    <style scoped>
    .merge-box {
      width: 100%;
      overflow-x: auto;
    }
    </style>
    
    展开全文
  • antd中如何给Table表格添加合计

    千次阅读 2019-12-04 09:49:42
    最近项目需求:在表格底部添加一行为金额的合计,然后分页每页都显示。 因为项目的UI框架使用的是Ant Design,找了一下Table的使用方法,发现居然没有合计数据这样一个功能,但是提供了一个footer属性用来做Table...

    最近项目需求:在表格底部添加一行为金额的合计行,然后分页每页都显示,金额字段是后端返回的数据,前端不进行计算。

    因为项目的UI框架使用的是Ant Design,找了一下Table的使用方法,发现居然没有合计数据这样一个功能,但是提供了一个footer属性用来做Table底部的空间显示。然后我使用footer中添加一个Table来做了一下合计行显示,勉强能做出来,但是需要修改Table的css样式,并且在不同分辨率下表格的线框无法对齐,总之就是很low。

    多方查找资料,以及自己的不断试错,终于找到了一种颇为完美的解决方法:将合计行追加到table表格内部,修改分页功能,维护也更加方便。

    先上图,切换分页后table底部也有合计行:
    在这里插入图片描述
    上代码:

    import React, { PureComponent } from 'react';
    import { Table } from 'antd';
    import { formatMoney } from '@/utils/utils'; //自定义格式化金额方法
    
    //  columns中的多余字段删除掉了,都是重复的样式,这里为了减少代码量。
    const columns = [
      {
        title: '序号',
        width: 66,
        dataIndex: 'totalIndex',
        render: (text, record, index) => {
          if (record.totalIndex == '合计') {
            return text;
          } else {
            return ++index;  //++index相当于index+1
          }
        }
      },
      {
        title: '凭证号',
        width: 200,
        dataIndex: 'voucherCode',
        render: (text, record) => {
          //因为只有合计行追加了字段totalIndex,所以判断当前字段来让合计行的凭证号列数据为空,只计算金额列。
          //产品说让空白显示!!!
          if (record.totalIndex) {  
            return '';
          } else {
            return text || '--';
          }
        }
      },
      {
        title: '借方金额',
        dataIndex: 'debit',
        render: text => formatMoney(text)
      },
      {
        title: '贷方金额',
        dataIndex: 'credit',
        render: text => formatMoney(text)
      }
    ];
    
    export default class ListTable extends PureComponent {
      // 切换分页时调用函数
      changePagination = pagination => {
        const {
          dispatch,
          queryFinanceList: { formValues }
        } = this.props;
        const params = {
          page: pagination.current,        //当前分页的页码
          limit: pagination.pageSize - 1,  //这里必须要减1,因为与后台规定每页获取的数据为10,此处的pageSize为11。
          queryCondition: { ...formValues },
        };
        dispatch({
          type: 'queryFinanceList/fetch',
          payload: params,
        });
      };
    
      render() {
        const {
          loading,
          queryFinanceList: {
            list,
            pageNum,
            total: computedTotal,  //重命名为computedTotal
            pages,
            pageSize
          },
        } = this.props;
        //定义合计行数据
        const totalRow = {
          id: String(Math.random()),
          totalIndex: '合计',
          debit: 1165000,  //应当取从后台返回数据,此处为演示,所以自定义了默认值
          credit: 1183000, //应当取从后台返回数据,此处为演示,所以自定义了默认值
        }
        //将合计行数据添加到list数组中后生成新数组:_list,此时table每页的数据为11
        const _list = list && list.length > 0 ? [...list, totalRow] : [];
        //table与pagination组件之间的联动
        //因为table表格每页显示的数据被pagenation分页默认的每页显示数pageSize所限制,默认为10,为了让合计行显示到页面上,需+1。
        const _pageSize = pageSize + 1;
        //table表格需要获取的总数据,为了让table将后台获取数据和新增合计行数据全部显示出来,需重新计算总数。
        const _total = computedTotal + pages;
        //分页设置
    	const paginationDefault = {
          showSizeChanger: true,
          showQuickJumper: true,
          current: pageNum,
          total: _total,
          pageSize: _pageSize,
          //因为与后台规定每页获取的数据为10,而前端自定义追加了一条合计行,这导致当前table的每页数据为11条,所以需要手动将分页数据+1
          //若是想显示为['10', '20', '30', '40'],则修改每页获取数据为9即可。
          pageSizeOptions: ['11', '21', '31', '41'], 
          //此处显示的是从后台获取的总数据数,合计行不在其中。
          showTotal: () => `共${computedTotal}条记录`
        }
        
        return (
          <Table
            loading={loading}
            rowKey={'id'}
            scroll={{ x: true }}
            bordered={true}
            loading={loading}
            columns={columns}
            dataSource={_list}
            pagination={paginationDefault}  
            onChange={this.changePagination}
          />
        );
      }
    }
    

    如果使用过ant design的Table组件以及Pagination组件的话,上面基本没有什么难点。
    逻辑理解的话有两个难点:
    1、分页功能的total和pageSize的计算方式?
    2、合计行totalRow与后台返回数据的关系?

    在table表格中使用pagination分页功能后,table每页显示的数据被pagination的pageSize(每页显示数据)限制,如果pageSize为10的话,那table中每页就只能显示10条数据。现在我们手动给table添加了合计行totalRow,那table每页的数据显示就变为了11,这时候pageSize若还是10,那第11条数据是显示不出来的,所以pageSize需要修改为11,这样合计行totalRow就能显示出来了。我们在切换分页的时候,是需要请求后台数据的,pageSize需要当做请求参数传送给后台。但是这时候我们设定了pageSize为11,而规定的每页显示的真实数据为10,所以需要在请求数据时pageSize-1。

    total也需要跟随pageSize的+1而改变。如果后台返回的total为61,pageSize为10,pages(几个页面)为7,那么“新total”的计算方式为:61+1*7=68。因为在table每页中都添加了一条合计行totalRow的数据,所以计算方式为61+1*7=68。如果手动添加了两条数据,那么总数计算就应当为:61+2*7=75。

    若还有更优美的实现方式,欢迎留言分享。

    参考:react:antd 中 table 添加合计行

    展开全文
  • DBGridEh组件可以在表格底部显示汇总,如记录数合计、列字段累加和等信息,具体属性设置如下: 1,在DBGridEh的属性FooterRowCount中设置底部显示的行数; 2,FooterColor和FooterFont中设置显示的颜色和字体 ...

    统计效果如下:

     

    DBGridEh 组件可以在表格底部显示汇总行,如记录数合计、列字段累加和等信息,具体属性设置如下: 


    1,在DBGridEh的属性FooterRowCount中设置底部显示的行数;

    2,FooterColor和FooterFont中设置显示的颜色和字体 


    3,然后在DBGridEh的Columns中某一列的属性Footers的编辑器中添加一个或多个显示列
     


    4,设置此显示列的Value属性,它为此汇总区的Caption; 

    5,设置此显示列的ValueType属性 
    显示列可以是字段值累加和、记录数合计、字段值或静态文件等集合类型,可以在设计时在中设置,也可在运行时通过设置Footers[i].ValueType指定其类型。


    6,设置DBGridEh.SumList.Active 为 True,才会进行汇总统计运算。 


    需注意的是,如显示类型为不是当前列的累加和,则需在fieldname属性中指定汇总列,其它类型则无此要求。在FormCloseQuery事件中,一定要将SumList.Active := False,因为在数据集中的数据多了以后,FormClose会让DBGridEh释放所有EhLib资源,会使得退出很慢,所以将SumList.Active := False不会引起退出很慢

    转载于:https://www.cnblogs.com/ddxxxb/p/6973142.html

    展开全文
  • 表格

    2021-04-29 18:40:58
    ▪ tr表示表格中的一行 tr ▪ td表示一个单元格 ▪ 表格的列数,由td最多的那行决定 □ colspan 横向的合并单元格 □ rowspan 纵向的合并单元格 ▪ 属性: td ▪ 表格头部,用来放头部的tr thead ▪ 表格的主体,...

    表格(table)

    在网页中表格可以用来表示一些格式化的数据
    ▪ 用来创建一个表格

    • table
      ▪ tr表示表格中的一行
    • tr
      ▪ td表示一个单元格
      ▪ 表格的列数,由td最多的那行决定
      □ colspan 横向的合并单元格
      □ rowspan 纵向的合并单元格
      ▪ 属性:
    • td
      ▪ 表格头部,用来放头部的tr
    • thead
      ▪ 表格的主体,用来放主体的tr
      ▪ 注意:如果创建表格时,没有指定tbody,则所有的td会自动添加到一个tbody
    • tbody
      ▪ 表格的底部,用来放底部的tr
    • tfoot
      ▪ 表头中的单元格
    • th
    • 表格相关的标签
    • 表单(form)
    • 表单用来讲用户的数据提交给服务器
    • 注册 登录
    • 搜索框
    • 发微博
    • 常见的表单:
    • 使用form标签来创建一个表单
      ▪ action 请求提交的路径
    • 属性
    • form
      表单项
      文本框
      input type=‘text’ name=‘xxx’
      密码框
      input type=‘password’ name=‘xxx’
      提交按钮
      input type=‘submit’ value=‘按钮上的文字’
    展开全文
  • 最近工作上遇到一个需求,就是通过对表格拖动来对表格里面的数据进行排序。在开发过程中遇到一个问题,就是表格...原来在表格内部设置了enableDragDrop属性为true时,表格会在构造时给表格添加一个拖动事件。即Ex
  • Boxable是个可用于轻松pdf文档中创建表格的库。 它使用 PDF库。 特征 pdf文件中建立表格 将CSV数据转换为pdf文档中的表 将列表转换为pdf文档中的表格 盒装支持下一张桌子的功能 单元格内容中HTML标签(不是...
  • 八、表格、表单

    2021-02-19 01:13:43
    tr表示表格中的一行 td td表示一个单元格 表格的列数,由td最多的那行决定 属性: colspan 横向的合并单元格 rowspan 纵向的合并单元格 thead 表格头部,用来放头部的tr tbody 表格的主体,用来放主体的...
  • 您可以选择重复表的底部添加页脚。页脚一般用于在一列数字的下方显示不断累加的总计。例如,您可以零用金报销单表单模板上给位于列零用金下方的页脚添加“合计”文本框。要列中添加值,您可以页脚...
  • 强制element-UI的table组件滚动到底部

    千次阅读 2019-08-26 12:42:21
    在开发一个数据表格展示的时候遇到的需求,当锁定了表头之后,添加一行数据,页面应该立即滚动到添加的数据那里 官方貌似没有提供这个功能,在网上找到了解决办法,记录一下 如果添加的数据一定在表格的最底部,那么...
  • 网页上有两个部分的表格。每个部分包含可变数量的(用户可以添加更多)。我有个将页面作为电子邮件进行处理的PHP页面,但我现在正在扩展它,以便将信息添加到我已有的My SQL数据库中。以下是表单和php处理...
  • 再比如有时我们希望在表格底部显示一行合计。 Ext的示例中带有这种锁定的扩展,如果只需要锁定列,依照这个示例就可以满足我们的要求。而且Ext的示例中也带有分组合计的功能,如果需要分组合计也正好可以满足。但是...
  • 这篇文章将向您展示如何通过使用Java的Free Spire.PDF将 Microsoft Access数据库中的数据导出为表格的PDF 。...如何检测表格底部,以便我们可以下面添加其他内容?注意:JDBC-ODBC桥已从Java SE 8中删除,...
  • 正方形-Javascript 技术: ...要求: 基本状态是4x4单元格的正方形,带有... 当您按下添加行按钮时-应该在底部添加一行。 您的标记应严格遵循设计(上图)。 当您将鼠标悬停任何“删除”或“添加”按钮上时,该按钮
  • mzfun:mz的r函数-源码

    2021-02-15 04:04:18
    mzfun 这只是我有用的功能集合 安装 您可以使用以下方法从安装发行的mzfun版本: install.packages( " mzfun " ) 以及来自的开发版本: # install.packages("devtools") ... 在表格底部添加汇总行 将汇总列添加到表
  • DataGridView单元格合并和...3.画面上添加一个纵向滚动框 实现的主要思路就是 用合计的横向滚动框控制两个DataGridView的横向滚动, 右侧的纵向滚动狂控制数据部分的DataGridView, 效果看起来就是合计始终显示。
  • 本文将向您展示如何使用 Free Spire.PDF for Java 将数据从Microsoft Access数据库导出到PDF表格。...如何检测到表格底部,以便我们可以下面添加其他内容?注:JDBC-ODBC Bridge已从Java SE 8中删除...
  • JqGrid 中 navGridd方法使用方法

    千次阅读 2017-06-24 10:57:39
    导航是个用户界面,可以简单执行记录操作如查找或者编辑,用户可以执行表格操作通过点击对应的导航栏上的图标按钮。  开发者可以创建自定义的动作,或者使用jqGrid已经定义的6个动作。jqGrid预定义的动作如下 ...
  • 响应式组合-源码

    2021-02-16 17:42:01
    响应式组合 设置 ... 1个CSS样式表 ...通过Bootstrap实现了Submit按钮表单下添加行 添加了指向社交媒体链接的参考链接以及徽标的附加照片与按钮相同的 调整边距和整个容器的位置 提交按钮位于左侧,徽标位于
  • 表格在底部会显示所选行数和总行数。 可以网格中添加检验栏。 表格的高度是自动控制的。 <img src=DownloadFilesgrid_activeximagessimplegrid1.jpg> <br> Purple Parrot SimpleGrid1 ActiveX控件系统要求: ...
  •  - 显示查询结果的页面上,有时需要复制其中个值。通过简单地点击个值,它将值复制到剪贴板以供使用。 2.将“高级设置”保存为“查询编辑器”页面上的默认设置。  - 查询编辑器页面上,您会注意到(2)...
  • 21.8 将某在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格改变顺序 21.12 表格操作常用方法 第22章 流行应用:AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效(二)...
  • 21.8 将某在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格改变顺序 21.12 表格操作常用方法 第22章 流行应用:AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效(二)...
  • 复制表格单元格值单击结果 - 显示查询结果的页面上,有时您要复制其中个值。只需单击个值,它将值复制到您的剪贴板以供使用。2.将“高级设置”保存为“查询编辑器”页面上的默认设置。 - “查询编辑器”页上...
  • 其实前面介绍图片显示、图片链接的时候为了清晰就是放在在表格中显示的。 图片 描述 百度 表情 Github的Markdown语法支持添加emoji表情,输入不同的符号码(两个冒号包围的字符)可以显示出不同的表情。...
  • 其实前面介绍图片显示、图片链接的时候为了清晰就是放在在表格中显示的。 图片 描述 百度 表情 Github的Markdown语法支持添加emoji表情,输入不同的符号码(两个冒号包围的字符)可以显示出不同的表情。...
  • 就如Anycell Report的名称那样,灵活强大的表格功能一直是AC Report区别于其它软件或控件最显著的特征之一,AC Report 表格取消了传统表格概念中“列”的概念,每一行上的单元格数量可以不等,且可以自由活动,勿须...
  • word使用技巧大全

    热门讨论 2011-03-18 20:37:53
    ★利用不间断空格使两个单词保持一行文字里 14 ★让光标段落间快速移动 14 ★巧用“选择性粘贴”中的“无格式文本” 14 ★快速显示文字格式 14 ★Word中用另类方法复制文本 15 ★去除自动添加的超级链接 15 ...
  • 所以不要觉得是你安装个UI库,让你去使用个UI库,并非如此!如果你只是想解决表格卡顿,你只需要关注umy-ui里面的表格组件! 最新通知: pl-table不更新维护,感谢您一直以来的关注,pl-table被移植到了umy...

空空如也

空空如也

1 2 3 4
收藏数 67
精华内容 26
关键字:

在表格底部添加一行