layui 数据表格 每列的合计功能实现

提示:文章写完后,目录档可以自动生成,如何生成可参考右边的帮助文


想要实现的效果:

提示:每列都可以实现合计(数字):


一、代码:


  //执行一个 table 实例
  table.render({
    elem: '#demo'
    ,height: 0
    , url: '/PendingInventory/pending_inventory_data'
    ,title: '用户表'
    ,page: true //开启分页
    ,limit: 10 //每页显示的数量
    ,limits: [10, 20, 50]
    ,toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
    ,totalRow: true //开启合计行
     ,cols: [[ //表头
         {type: 'checkbox', fixed: 'left' ,totalRowText:"合计:"}
      ,{field: 'image', width: 120, title: '图片'};
                    }}


      ,{field: 'storage_quantity', width: 90, title: '入库数量',totalRow:true}
    // 将想要合计的 field 设置  totalRow:true


总结

提示:这是layui 官方的 合计方式,网上也有其他的合计方式 ,这种合计对初学者来说很友好。
 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui数据表格中,可以通过监听复选框的选中事件,来实现单选功能。具体实现步骤如下: 1. 在页面中定义数据表格,并设置其复选框列的lay-skin属性为primary,表示使用原始风格的复选框。 ```html <table class="layui-table" id="demo"> <thead> <tr> <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th> <th>ID</th> <th>姓名</th> <th>性别</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="" lay-skin="primary"></td> <td>1</td> <td>小明</td> <td>男</td> <td>北京</td> </tr> <tr> <td><input type="checkbox" name="" lay-skin="primary"></td> <td>2</td> <td>小红</td> <td>女</td> <td>上海</td> </tr> <!-- ... --> </tbody> </table> ``` 2. 在JavaScript代码中,监听表格的复选框选中事件,并在事件处理函数中,根据选中状态来判断是否需要取消其他行的选中状态。 ```javascript layui.use('table', function(){ var table = layui.table; //监听表格复选框选择 table.on('checkbox(demo)', function(obj){ var checkStatus = table.checkStatus('demo'); var data = checkStatus.data; var isChecked = obj.checked; var rowIndex = obj.data.LAY_TABLE_INDEX; if (isChecked) { // 如果选中,则取消其他行的选中状态 for (var i = 0; i < data.length; i++) { if (data[i].LAY_TABLE_INDEX != rowIndex) { table.checkStatus('demo').data[i].LAY_CHECKED = false; } } } }); }); ``` 在上述代码中,我们首先获取当前表格的选中状态,然后获取当前选中的行的索引值,接着判断是否为选中状态,如果是,则遍历所有行,将除当前选中行之外的其他行的选中状态取消。这样,就可以实现单选功能了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值