layui-table 自定义合计行内容

layui合计功能 今天就来给大家讲一下我在做项目中遇到的问题,项目中有这样一个效果,选中一些商品,然后的单价都加起来,显示所有选中的商品单价的累计消费。首先看一下它的代码,它是怎么使用的。如下图所示: 首先我们需要给他开启该列的自动合计功能,也就是说哪一列需要合计一些数据的就在那一列上面添加totalRow:true这个参数。前提是你必须在前面写一个开启自动合计功能的是参数totalRow:true。接下来就是totalRowText:””这个参数;你也可以不用写上totalRowText这个参数,可写可不写。它的功能就是 阅读详情
AI摘要

本文介绍了如何在前端使用layui库实现一个具有合计行和自定义内容的表格,包括设置totalRowText、列配置和数据解析的详细步骤。

首先开启合计行:totalRow: true,

然后在想要开启合计的列添加:totalRowText: '自定义内容'

最后:

done: function(res, curr, count){
            this.elem.next().find('.layui-table-total td[data-field="field"] .layui-table-cell').text("自定义内容");
        }

下面来看实战

table.render({
        elem: '#custom-table-operate',
        url: 'Tomb_tombAreaList', 
        css: [
          '.layui-table-view td[data-edit]{color: #16B777;}'
        ].join(''),
        totalRow: true,
        cols: [[
          // {checkbox: true, fixed: true},
          {type:"numbers", fixed: 'left', title: '序号', width:90, align:"center", totalRowText: '合计'},
          {field:'', title: '销售情况', width:190, totalRowText: '已售:', templet: function (item){
            if(item.FSale == 0 && item.FOrder ==1){
                return "已预定"
            }else if(item.FSale == 0 && item.FOrder == 0){
                return "空闲"
            }else{
                return "已售"
            }}},
          {field:'FTombName', title: '墓园', width:190}, 
          {field:'FTombType', title: '墓型', width:190, totalRowText: '已预定'}, 
          {field:'FName', title: '墓区', width:190},   
          {field:'FRow', title: '排', width:190, totalRowText: '空闲'},     
          {field:'FRowNum', title: '座', width:190},  
        ]],
            height: 450,
            page:true,
        page: { 
          layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
          //,curr: 5 //设定初始在第 5 页
          // ,groups: 3 //只显示 1 个连续页码
          ,first: false //不显示首页
          ,last: false //不显示尾页
          ,limits: [10, 20, 30]
          ,limit:10
        },
        parseData:function(res){
          //解析分页数据
          var result;
          if (this.page.curr) {
              result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
          } else {
              result = res.data.slice(0, this.limit);
          }
          return {
              "code": res.code, //解析接口状态
              "msg": res.msg, //解析提示文本
              "count": res.count, //解析数据长度
              "data": result //解析数据列表
          }
        }, 
        done: function(res, curr, count){
            this.elem.next().find('.layui-table-total td[data-field="FTombName"] .layui-table-cell').text(obj.sale);
            this.elem.next().find('.layui-table-total td[data-field="FName"] .layui-table-cell').text(obj.order);
            this.elem.next().find('.layui-table-total td[data-field="FRowNum"] .layui-table-cell').text(obj.notsale);
        }
      });

页面显示效果如下:

最后祝大家旗开得胜!

layui表格实现合计 今天遇到了新的需求,要在表格中加一栏合计,这可愁坏了我,别误会,不是太难,而是不知道用哪种方法...... 毕竟作为一个程序员,办法总比问题多,细细思索之后,我想到了三种方案: (ps:如果着急的小伙伴,请直接看plan C) plan A:后台进行统... 阅读详情

相关推荐

layui 数据表格table合计配置跟合计行去掉小数点问题

layui 数据表格table合计配置跟合计行去掉小数点问题 表格设置 1.在表格的基本参数里设置 totalRow 2.在要显示“合计”两个字的列配置 3.在要统计的列里配置 完成代码案例 [ { field: 'id', title: 'id', align: 'center', fixed: "left"}, { field: 'name', title: '名称', align: 'center', totalRowText: '合计' //合计两个字在这一列的最下面 }

caixuanji的博客 2710

layui中table怎么合计

在上述代码中,我们给分数列添加了class为"sum-column",并在done回调函数中调用calculateSum()函数计算合计结果。在calculateSum()函数中,我们使用jQuery的each()方法遍历所有的"sum-column"列,将每一列的值累加起来,并将结果显示在合计行中。

hbhouse的博客 4602

layui去除合计行小数点 亲测可行

function getList(foodName,timeStart,timeEnd) { var table = layui.table; // timeStart='2020-03-01'; $.service.get("/pcorder/list",{page:1,limit:99999,foodName:foodName,timeStart:timeStart,...

fanghui88的专栏 2369

layui数据表格合计行

在做数据表格的时候,如果需要获取某一行的数据、或者需要获取某一行数据中的某一个数据时。下面介绍两个方法可以获取选中行数据: 1.监听行单双击事件: 在点击或双击时触发; 语法: 需修改一下 row(test) 的test,它是对应table原始容器lay-filter属性的值; 它主要用于区分的,相当于选择器一样。如果没有这个属性,监听行单双击事件就没有效果。 可以添加一些样式,使其易识别一点,标注选中样式,勾选单选框。 下面画线处,根据你的需求填写,单选框:radio,复选框:checkbox; 监听

weixin_55753367的博客 6643

【Layui】Layui Table 底部合计栏实现方案

本文介绍了Layui Table底部合计栏的实现方案。通过使用Layui Table组件,在表格渲染完成后计算数值列的总和,并将合计行插入到表格底部。方案实现了以下功能: 初始化表格时开启合计行功能 计算当前页数据的数值列总和 动态添加合计行到表格底部 监听分页和数据排序事件,重新计算合计值 代码示例展示了完整的实现过程,包括表格初始化、合计行计算、事件监听等关键步骤,适用于需要展示数据汇总统计的场景。

德仔 583

Coze视频混剪智能体工作流,1小时制作100条带货混剪视频,全平台通用

摘要:本文介绍如何利用Coze智能体工作流一键生成全平台带货混剪视频。该工作流支持双视频素材查重处理、智能文案重塑、画面重组等核心功能,通过多节点协同实现批量生产。系统可自动下载视频、提取字幕、生成新脚本,并完成剪辑合成,支持飞书表格批量操作。该工作流已在iThinkAi扣子团队空间开放复制使用,帮助用户高效制作爆款带货视频。

ai979290的博客 1088

【教程】layui数据表格合计行自定义内容

参考:https://fly.layui.com/jie/50205/效果如图:done:function(res,curr,count){ //如果是异步请求数据方式,res即为你接口返回的信息。 //如果是直接赋值的方式,res即为:{data:[],count:99}data为当前页数据、count为数据总长度 cons...

hifhf的专栏 7130

搭建ipv6并发代理池

我开了个知识星球,把将本期搭建写成shell脚本已放到了里面,有需要的小伙伴可以自行去取,jd的参数,阿里bxet纯算、快手滑块,Pdd—Anti,ikuai,b站login之-极验3文字,某音ab,瑞数456vmp补环境等等,主要是某些大佬加我问成品,很多人都打着白嫖的手段去加我好友为目的,问完基本就以后没有任何的交集,这样的交好友雀氏没有任何意义。不如我直接开个星球,里面直接放我逆向的成品以及逆向的思路,这样大家各取所需,我也有点收益,意义更明确点,免得浪费大家的时间。我是pve下的ubuntu。

weixin_44697518的博客 1473

layui中自定义合计行的数值

大家都知道layui官网上的合计行totalRow: true是自动算出本列共多少的 这种实现就很简单,只需要在render里开启合计行totalRow: true,随后在你想定义的字段cols里定义文本totalRowText: ‘合计’,以及合计数totalRow: true(在哪一个列里定义,就计算哪一个列的值) table.render({ elem: '#test' ,url:'/test/table/demo1.json' //你自己的路径 ,toolbar: '#too

Y_R_Q的博客 5768

SAP中贸易伙伴的应用原理简析

公司也称为贸易伙伴,是出具合并报表的组织单位,可以为客户和供应商分配公司(贸易伙伴),用于识别集团内关闻公司间的业务往来,在编制合并报表时进行往来账务的计算处理。 如下图某贸易伙伴公司(关联方名称G0059)在我方公司的SAP系统中有多重身份(即是供应商,又是客户)。那么在我方公司SAP系统中建立起公司(贸易伙伴),并关联到供应商和客户主数据中。之后,就可以通过G0059这个贸易伙伴名称来识别与该贸易伙伴间的往来业务。 相应的配置设定如下: 定义公司(贸易伙伴或关联方) 会计凭证中会

专注SAP应用技术文章写作,致力于拉近用户与系统间的距离; 9817

Windows报无法成功完成操作,因为文件包含病毒或潜在的垃圾软件的解决方法

Windows报无法成功完成操作,因为文件包含病毒或潜在的垃圾软件的解决方法 在Windows的搜索框中输入Windows安全中心,搜索到后将其打开 点击病毒和威胁防护将鼠标移动到Microsoft Defender防病毒选项处,将定期扫描打开 下滑找到管理设置 先关闭篡改防护,再点击添加或删除排除项 先点击添加排除项,再点击文件,选择报出异常的文件,将其添加到排除项中,过程中会存在跳框确认,皆点击确定,完成后就可以运行报无法成功完成操作,因为文件包含病毒或潜在的垃圾软件异常的文件

123 2万+

Layui 是否开启合计行区域

Layui 是否开启合计行区域 1、设置表格打开合计行 table.totalRow:true 2、设置要统计的行 table.cols.totalRowText:显示自定义的合计文本 table.cols.totalRow:是否开启该列的...

夏已微凉、 2133

使用Navicat连接Oracle数据库及ORA-12541: TNS: 无监听程序、ORA-28547:connection to server failed、ORA-12514:TNS报错解决方案

使用Navicat连接Oracle数据库及ORA-12541: TNS: 无监听程序、ORA-28547:connection to server failed、ORA-12514:TNS报错解决方案。

蓝多多的小仓库 5220

取消layui合计行的小数

取消layui合计行的小数 开发工具与关键技术:java 作者:彭浩达 撰写时间:2019年 7月 16日 tabApply = layuiTable.render({ elem: ‘#tabMice’, toolbar: true,//#toolbar0 /url:‘servlet/CrkServlet?type=select...

weixin_42601615的博客 3593

【考研高数-高等数学-基础】第一章 函数、极限、连续

第一章 函数、极限、连续 第二章 导数与微分 第三章 微分中值定理及导数应用 第四章 不定积分 第五章 定积分与反常积分 第六章 定积分的应用 第七章 微分方程 第八章 多元函数微分学 第九章 二重积分 第十章 无穷级数 第十一章 向量代数与空间解析几何及多元微分学在几何上的应用 第十二章 多元积分学及其应用 难题: 极限的递推 微分中值定理的证明题 定积分的不等式和等式的证明 重积分的不等式和等式的证明 线面积分的不等式和等...

刘鑫磊 2036

机器人控制基础:电机编码器常见类型

电机编码器是测量电机位置、速度和方向的传感器,主要分为光电、磁性和旋转变压器三类。光电编码器精度高但需防尘,适用于伺服系统;磁性编码器耐环境性强,常用于汽车电机;旋转变压器适应极端环境,多用于军工领域。按信号类型可分为增量式(成本低)和绝对式(断电保留位置)。选型需综合考虑精度、环境适应性及成本。

start_up_go的博客 477

Layui table合计自定义保留位数

Layui table计算合计行的时候,默认是保留2位小数的,所以要想自定义保留小数,那么久必须修改table.js源代码,修改方式如下: layui2.5.6下的table.js: 没有源文件的可以这边下载:https://github.com/sentsin/layui/edit/master/src/lay/modules/table.js 第931行,可以搜索 数据合计行 关键字,新增以下两行代码: ,fixedNum = 2; if (item3.fixedNum != 2){ thisT

Effotzjw_小白慢慢踏全栈 2872

Multica 自托管部署与使用入门:从上线到让 AI Agent 真正干活

Multica是一个将AI Agent作为团队成员的任务协作平台,支持自托管部署。本文介绍了完整的单机部署流程: 核心架构包括前端界面、后端服务、PostgreSQL数据库和Runtime执行机器 推荐使用Docker Compose部署,需配置数据持久化目录 提供详细的docker-compose.yml和.env配置文件说明 重点注意事项:数据库密码和JWT密钥必须修改,生产环境配置必须设为production 需正确配置前端访问地址和WebSocket连接 部署完成后,用户可创建AI Agent并将其

q742971636的博客 1733

【layui】layui.table表格实现底部固定两行合计行

layui表格layui.table表格实现底部固定两行(如:本页合计,全部合计);layui表格渲染完成后进行样式修改实现底部固定两行

XujiRe的博客 2771

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

layui.table之totalRow合计属性自定义格式解决方案

目录一、问题描述二、思路重现三、解决方案~~   码上福利 一、问题描述 如上图所示,在日常开发中,相信只要使用layui.table数据表格来渲染列表,或多或少会使用到其合计属性(totalRow)… 但这时就会有个让人头疼的问题,使用totalRow属性展示的数据是默认带有两位小数的,即使合计结果为整数,也会自带(.00)结尾… 作为一个合格的开发猿来说,首先想到查阅下layui官方文档… 从打开官方文档到浏览其内容,由一丝期待逐渐流露出失落的神情,哎…人生么,就是这样,期望越大失望亦

猿医ˉ生 1万+

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

Layui 表格合计行:3 步搞定 totalRow 配置

Layui 表格组件内置表格合计行功能。开启 totalRow 后,表格底部自动累加数字列,还支持自定义文本与模板,报表统计不用再手写循环。 ## 功能速览:2 个层级、3 种列级取值 合计行配置分两层:表级负责开关,列级负责每列怎么统计。 | 层级 | 配置位置 | 说明 | |------|----------|------| | 表级开关 | `table.render` 的 `tot

gitblog_01148的博客 640

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

Layui 数据表格合计

Lay-ui数据表格合计实现基础的数据表格合计获取合计数据修改合计数据合计后计算平均值去除小数编辑后重新合计 阅读提示:本人萌新一枚,写此博客仅仅是记录一下最近踩坑,有错漏的请大佬指正。 实现基础的数据表格合计 环境: layui2.5.7。 首先展示一下官方文档说明 下面展示具体实现代码 最终实现模样 获取合计数据 数据合计完成后,有时后需要获取合计后的数据,但查看文档却不知道合计后的数据从哪里获得,怎么办? 通过F12可以轻易的看见合计数据全部存储在<div class=""layui-ta

ADSsun的博客 5494

layui 表格(table)合计 取整数

提示:谨慎修改源码layui table.js 路径 ./static/js/layui/lay/modules/table.jsi||e:e// 原代码示例:这样加了totalRowType:'int’的就会取整数,而不加的合计取两位小数两种可以同时存在。

我有故人折剑去,斩尽春风不曾归 2368

Layui表格合计、单元格编辑和自定义列功能的开启

Layui是有自带的合计功能的,但默认是没开启,我们需要把需要加上合计的功能的行的totalRow状态改成true,再在表头外加上totalRow: true,就可以了。 开启合计功能代码: cols: [[ { field: 'CommID', title: '商品ID', hide: true }, { field: 'MarketMeny', title: '销售价', align: '...

weixin_44544859的博客 7353

Layui表格组件合计行自定义数据字段统计方案

Layui作为一款经典的前端UI框架,其表格组件(table)提供了强大的数据展示功能。在实际开发中,我们经常需要对表格数据进行合计统计,而Layui的合计行(totalRow)功能可以很好地满足这一需求。本文将深入探讨如何实现表格合计行中对指定数据字段的统计功能。 ## 核心问题分析 在Layui表格组件的使用过程中,开发者可能会遇到这样的场景:表格中的某些列需要展示复合数据(如"数量/费用...

gitblog_00818的博客 771
上一篇: layui-table关于从数据库返回值统计的问题
下一篇: 无法获取弹出层window对象里的内容,或无法读取
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值