表格自动合计

<style>
    table {
        table-layout: fixed;
    }
</style>
<script type="text/javascript">
    layui.use('table', function () {
        var table = layui.table, form = layui.form;
        let start_time = "{$start}";
        let end_time = "{$end}";

        //第一个实例
        partsTable = table.render({
            elem: '#layui-table'
            , url: "{:Url('sales/getData')}?start_time=" + start_time + "&end_time=" + end_time //数据接口
            , page: false //开启分页
            , totalRow: true
            , cols: [[ //表头
                , {field: 'store_name', title: '店铺名称', totalRowText: '合计总数'}
                , {field: 'product_name', title: '商品名称'}
                , {field: 'quantity', title: '发货量', totalRow: true, templet: "#quantity"}
                , {
                    field: 'price', title: '发货金额', totalRow: true, templet: function (d) {
                        if (d.price >= 0) {
                            return d.price.toFixed(2);//金额为负数的时候要求红色字体显示
                        } else {
                            return '<span style="color: red;">' + d.price.toFixed(2) + "</span>";
                        }
                    }
                }
            ]]
            ,done: function (res, curr, count) {
                $("table").css("width", "100%");
                let value = this.elem.next().find('.layui-table-total td[data-field="quantity"] .layui-table-cell').text();
                value = parseInt(value);//默认展示两位小数,项目需要取整
                this.elem.next().find('.layui-table-total td[data-field="quantity"] .layui-table-cell').text(value);
            }
            , id: 'reload'
        });

    });
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容