LAYUI 表格合计

最新推荐文章于 2024-01-09 14:04:35 发布

Hacker_2020

最新推荐文章于 2024-01-09 14:04:35 发布

阅读量1.1k

点赞数

文章标签： layui 前端 javascript

原文链接：https://www.freesion.com/article/79351387797/

版权

文章介绍了如何使用LAYUI框架在表格中实现合计行功能，包括开启分页、工具栏和合计行的设置，以及如何通过接口返回数据并展示所有列表的总和。示例代码展示了具体的配置方法，包括在JS和HTML中的实现细节。

摘要由CSDN通过智能技术生成

LAYUI 表格合计

在这里插入图片描述

效果是上面的，代码是：

table.render({
    elem: '#demo'
    ,height: 420
    ,url: '/demo/table/user/' //数据接口
    ,title: '用户表'
    ,page: true //开启分页
    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
      ,{field: 'city', title: '城市', width:150} 
      ,{field: 'sign', title: '签名', width: 200}
      ,{field: 'classify', title: '职业', width: 100}
      ,{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    ]]
  });

重要的是totalRow 这个参数，还有一种是显示所有列表的总和，代码如下：

在这里插入图片描述

效果是上面，代码如下：

接口返回的内容要加个字段，如下类型：

在这里插入图片描述

html中这样写：

<div class="count">合计：
     <div id="total_price" style="color:red;display:inline-block;"></div>;
     <div id="total_num" style="color:red;display:inline-block;"></div>
</div>

js中这样写：

var tableIn = table.render({
            id: 'content',
            elem: '#list',
            url: '{:url("index")}',
            where:{catid:'{:input("catid")}'},
            method: 'post',
            toolbar: '#topBtn',
 
            page: true,
            cols: [[
                {type: "checkbox", fixed: true},
                {field: 'id', title: '{:lang("id")}', width: 80, fixed: true},
                {field: 'trade_no', title: '系统订单号', width: 100, fixed: true},
                {field: 'thr_no',  title: '微信平台订单号', width: 100,fixed: true},
                ........
 
                {width: 160, align: 'center', toolbar: '#action',title:'操作',fixed: false}
            ]],
            done:function(res){
                $("#total_price").html(res.total_price)
                $("#total_num").html(res.total_num)
            },
            limit: 10
        });