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.效果圖 (只是樣子是單選框，其實是多選框)

點擊單選

點擊多選

點擊全選

點擊全選之後，點擊單行

點擊全不選

如果本篇文章對你有幫助的話，很高興能夠幫助上你。

當然，如果你覺得文章有什麼讓你覺得不合理、或者有更簡單的實現方法又或者有理解不來的地方，希望你在看到之後能夠在評論裏指出來，我會在看到之後儘快的回覆你。