layui学习笔记——监听表格复选框选择

最新推荐文章于 2024-08-20 18:03:49 发布

weixin_33859844

最新推荐文章于 2024-08-20 18:03:49 发布

阅读量1.9k

点赞数

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/u/2427561/blog/1531529

版权

2019独角兽企业重金招聘Python工程师标准>>>

html如下：

<div class="layui-btn-group userTable">
  <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
  <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
  <button class="layui-btn" data-type="isAll">验证是否全选</button>
</div>
<table class="layui-table" lay-data="{height:313, url:'/user/userJson' ,id:'idTest'}" lay-filter="user">
</table>

JavaScript：

layui.use('table', function(){
var table = layui.table;
  //监听表格复选框选择
  table.on('checkbox(user)', function(obj){
  });

  var $ = layui.$, active = {
    getCheckData: function(){ //获取选中数据
      var checkStatus = table.checkStatus('idTest')
      ,data = checkStatus.data;
      layer.alert(JSON.stringify(data));
    }
    ,getCheckLength: function(){ //获取选中数目
      var checkStatus = table.checkStatus('idTest')
      ,data = checkStatus.data;
      layer.msg('选中了：'+ data.length + ' 个');
    }
    ,isAll: function(){ //验证是否全选
      var checkStatus = table.checkStatus('idTest');
      layer.msg(checkStatus.isAll ? '全选': '未全选')
    }
  };
  
  $('.userTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});

转载于:https://my.oschina.net/u/2427561/blog/1531529