layui admin table单击行勾选checkbox并高亮显示

前言

表格使用方法级和自动渲染都适用

需要注意的是：
01.这两个地方的筛选器名字要对应上
02.表内容td元素最好不要设置背景色，有位小伙伴就是设置了td背景色为白色，导致js动态添加的class设置的颜色被覆盖了,td的白色背景色覆盖tr高亮的颜色

html： <table lay-filter="menu-filter"><table>
js:    table.on('checkbox(menu-filter)', function(obj) {}

1.HTML部分

<table class="layui-table" id="menu" lay-filter="menu-filter">
  <thead>
    <tr>
      <th lay-data="{type: 'checkbox', fixed: 'left'}"></th>
      <th lay-data="{field: 'menuid', width: 150, align: 'center', fixed: 'left'}">菜单ID</th>
      <th lay-data="{field: 'menuname', width: 130, align: 'center'}">菜单名称</th>
      <th lay-data="{field: 'supMenu', width: 130, align: 'center'}">上级菜单</th>
      <th lay-data="{field: 'icon', width: 100, align: 'center', templet: iconTpl}">图标</th>
      <th lay-data="{field: 'type', width: 100, align: 'center', templet: typeTpl}">类型</th>
      <th lay-data="{field: 'sortNum', width: 150, align: 'center', sort: true}">排序号</th>
      <th lay-data="{field: 'munuUrl', width: 250, align: 'center'}">菜单URL</th>
      <th lay-data="{field: 'access', width: 250, align: 'center'}">授权标识</th>
    </tr>
  </thead>
</table>

或：

<table class="layui-table" id="menu" lay-filter="menu-filter"></table>

2.css样式

.layui-table-click {
   background-color: #ddf2e9 !important;
}

3.js部分

<script>
  layui.config({
    base: '../../layuiadmin/'
  }).extend({
    index: 'lib/index'
  }).use(['index', 'table'], function() {
	var table = layui.table;
	
	//初始渲染表格
    table.init('menu', {})
    
    // ...此处省略一万行代码
	
	//点击行checkbox选中
    $(document).on("click", ".layui-table-body table.layui-table tbody tr", function() {
        var index = $(this).attr('data-index');
        var tableBox = $(this).parents('.layui-table-box');
        //存在固定列
        if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length > 0) {
            tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
        } else {
            tableDiv = tableBox.find(".layui-table-body.layui-table-main");
        }
        var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
        if (checkCell.length > 0) {
            checkCell.click();
        }
    });

    $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function(e) {
        e.stopPropagation();
    });

    //监听复选框事件，被选中的行高亮显示
    table.on('checkbox(menu-filter)', function (obj) {
      if (obj.checked == true && obj.type == 'all') {
        //点击全选
        $('.layui-table-body table.layui-table tbody tr').addClass('layui-table-click');
      } else if (obj.checked == false && obj.type == 'all'){
        //点击全不选
        $('.layui-table-body table.layui-table tbody tr').removeClass('layui-table-click');
      } else if (obj.checked == true && obj.type == 'one'){
        //点击单行
        if (obj.checked == true) {
          obj.tr.addClass('layui-table-click');
        } else {
          obj.tr.removeClass('layui-table-click');
        }
      } else if (obj.checked == false && obj.type == 'one') {
        //点击全选之后点击单行
        if (obj.tr.hasClass('layui-table-click')) {
          obj.tr.removeClass('layui-table-click');
        }
      }
    });
 });
</script>

3.效果图 (只是样子是单选框，其实是多选框)

点击单选

点击多选

点击全选

点击全选之后，点击单行

点击全不选

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。