点击不同的统计类型重载layui表格

点击不同的统计类型重载layui表格

开发工具与关键技术：Visual Studio 2015
作者：徐晶旗
撰写时间：2019年8月17日

在做项目的时候涉及到了统计分析,比如要分析经营利润分析,里面就包含了多角度的分析,分析共包括了按供应商统计,按年份统计,按品牌分析,按月份分析等等。点击对应的按钮在表格中能查询相应的内容，就比如点击下面的单选框再点一下统计右边的表格中的内容会变，所以就需要多次重载表头。

首先渲染出layui表格

**@* table数据信息 *@<table id="ProfitAnalyse" lay-filter="ProfitAnalyse"></table>$(function () {    layui.use(["table", "layer"], function () {layuiTable = layui.table;//数据表格模块//汇总统计表格ProfitAnalyse = layuiTable.render({elem: "#ProfitAnalyse",data:[],                   totalRow: true, //开启合计行cols: [[{ type: 'numbers', rowspan: 2, totalRowText: '合计', },{ title: '项目', field: 'project', rowspan: 2, align: 'center', },{ title: "销售汇总", colspan: 5, align: "center", },],[{ title: '销售数', field: 'SellAmount', align: 'center', totalRow: true, style: 'color:red' },{ title: '销售金额', field: 'TagPrice', align: 'center', totalRow: true, style: 'color:red' },{ title: '成本金额', field: 'StockSum', align: 'center', totalRow: true, style: 'color:red' },{ title: '毛利金额', filed: 'ProfitMoney', align: 'center', totalRow: true, style: 'color:red' },{ title: '毛利率', field: 'ProfitProbability', align: 'center', totalRow: true, },]],page: {limit: 5,//每页显示的条数limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50]//每页条数的选择项},height:342,});});**

然后就要写上重载表格的方法，代码如下：

**function Reloadpurchases() {var type = $("input[name='style']:checked").val()//获取统计类型var text =$("input[name='style']:checked").parent()[0].innerText.toString();//获取统计类型名称全部字符串,例如(按[供应商]统计)var name = text.substring(text.indexOf('[') + 1, text.indexOf(']'));//获取到需要的类型名称,例如(供应商)                  var cols = ProfitAnalyse.config.cols[0]; //获取采购进货单数据表格表头配置项数组，是一个二维数组，这里只需要第一个所以给下标0cols[1].title = name;  //把对应的表头配置项title改为上面获取到的name名称layuiTable.reload('ProfitAnalyse', {cols: [cols],//重载表头实现改变表头的效果                     });}**

最后到统计按钮这里添加点击事件执行这个方法，当选中了某个单选框时，再点击统计，表格就能按不同的类型统计了。

<input type="button"style=“background:lightblue;color:lightcoral;width:60px;height:30px” value="统计"οnclick=“Reloadpurchases();”>

点击不同的统计类型重载layui表格相关推荐

ztree 点击重载 layui table
ztree 点击重载 layui table <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui表格重载后界面闪动解决方案
layui框架默认提供的table模块,使用该模块可以快速高效的完成表格数据的开发.但是最近在使用过程中发现了一些小问题.下面一起来看下吧! 官方说明地址:https://www.layui.com/ ...
Layui表格重载模糊查询
模糊搜索layui表格的数据,实现方法,在输入框中搜索对应的条件,点击搜索来搜索. 效果如图: html哪里我们需要两个接收条件的输入框,以及一个搜索的按钮 Js哪里我们需要在重载哪里,获取到输入框的 ...
Spark Streaming 项目实战 (4) | 得到最近1小时广告点击量实时统计并写入到redis
大家好,我是不温卜火,是一名计算机学院大数据专业大二的学生,昵称来源于成语-不温不火,本意是希望自己性情温和.作为一名互联网行业的小白,博主写博客一方面是为了记录自己的学习过程,另一方面是总结自己 ...
Layui表格数据重载(不请求servlet)
在做项目过程中,可能会有这样的需求,从一张表格勾选数据返回到另外一张表格显示,而通常实现这个功能有两种方式,一种是获取勾选数据的Id请求后台来返回数据,另外一种就是直接在页面获取,不需要请求后台.这里 ...
layui数据表格接口_layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui表格使用之重载
layui表格使用之重载(reload) 近期由于项目使用到layui,所以下班后花了点时间学习了一下layui ,记录分享一下学习心得与踩坑经验需求描述: 按照创建时间查询xxx表数据需要支持条件 ...
Spark日志分析项目Demo(8)--SparkStream，广告点击流量实时统计
广告点击统计需求: (1)对接kafka,获得数据 (2)发现某个用户某天对某个广告的点击量已经大于等于100,写入黑名单,进行过滤 (3)计算广告点击流量实时统计结果 (4)实时统计每天每个省份to ...

点击不同的统计类型重载layui表格

点击不同的统计类型重载layui表格相关推荐

最新文章

热门文章