点击不同的统计类型重载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]; //获取采购进货单数据表格表头配置项数组，是一个二维数组，这里只需要第一个所以给下标0
            cols[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();”>