LAYUI 表格合计

LAYUI 表格合计

LAYUI 表格合计_第1张图片

效果是上面的,代码是:

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 这个参数,还有一种是显示所有列表的总和,代码如下:

LAYUI 表格合计_第2张图片

效果是上面,代码如下:

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

LAYUI 表格合计_第3张图片

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
        });

这样就可以实现上面的效果

你可能感兴趣的:(layui,前端,javascript)