layui學習筆記——監聽表格複選框選擇

html以下: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:ui

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) : '';
  });
});
相關文章
相關標籤/搜索