美文网首页
表格自动合计

表格自动合计

作者: 玛瑙鑫 | 来源:发表于2020-03-26 11:43 被阅读0次
    <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>
    

    相关文章

      网友评论

          本文标题:表格自动合计

          本文链接:https://www.haomeiwen.com/subject/fsgquhtx.html