如何在单元格元素属性上过滤制表符

问题描述

我想根据单元格样式过滤制表器表格中的数据，例如，显示所有验证失败的单元格。

文档中的所有示例均基于数据进行过滤，而自定义函数不会传递要过滤的单元格对象。

这里是codepen

中的示例

var columns = [];
$(function () {
  $("#table thead tr th").each(function (i,cell) {
    var name = $(cell).text();
    var field = name.toLowerCase().replace(" ","_");
    columns.push({
      title: name,field: field,editor: "input",validator: "required"
    });
  });
  var table = new Tabulator("#table",{
    layout: "fitColumns",validationMode: "highlight",columns: columns
  });
  table.validate();
});

body {
  margin: 20px;
}
table {
  font-size: 14px;
}

.tabulator-validation-fail {
  background: #f4433624;
}

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email Address</th>
      <th>Mobile</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jordan</td>
      <td>Talbot</td>
      <td>[email protected]</td>
      <td>408 345 3433</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>Nico</td>
      <td>Rocha</td>
      <td>[email protected]</td>
      <td>408 445 5656</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Cienna</td>
      <td>Bryan</td>
      <td>[email protected]</td>
      <td>210 454 7799</td>
      <td>Austin</td>
    </tr>
    <tr>
      <td>Vinny</td>
      <td>Hood</td>
      <td>[email protected]</td>
      <td>540 672 2585</td>
      <td></td>
    </tr>
    <tr>
      <td>Jay</td>
      <td>Lennon</td>
      <td>[email protected]</td>
      <td></td>
      <td>Boston</td>
    </tr>
    <tr>
      <td>Helen</td>
      <td>Eaton</td>
      <td>[email protected]</td>
      <td></td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>

解决方法

使用rowFormatter对象获取所有线对象，并使用getElement方法获取线元素<tr>以及validate来检查该线是否有效，如下所示：

var columns = [];
$(function () {
  $("#table thead tr th").each(function (i,cell) {
    var name = $(cell).text();
    var field = name.toLowerCase().replace(" ","_");
    columns.push({
      title: name,field: field,editor: "input",validator: "required"
    });
  });
  var table = new Tabulator("#table",{
    layout: "fitColumns",validationMode: "highlight",columns: columns,rowFormatter: function(row) {
      let valid = row.validate() // if valid,returns true
      if(valid === true) {
        $(row.getElement()).css('display','none')
      }
    }
  });
  table.validate();
});

body {
  margin: 20px;
}
table {
  font-size: 14px;
}

.tabulator-validation-fail {
  background: #f4433624;
}

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email Address</th>
      <th>Mobile</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jordan</td>
      <td>Talbot</td>
      <td>[email protected]</td>
      <td>408 345 3433</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>Nico</td>
      <td>Rocha</td>
      <td>[email protected]</td>
      <td>408 445 5656</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Cienna</td>
      <td>Bryan</td>
      <td>[email protected]</td>
      <td>210 454 7799</td>
      <td>Austin</td>
    </tr>
    <tr>
      <td>Vinny</td>
      <td>Hood</td>
      <td>[email protected]</td>
      <td>540 672 2585</td>
      <td></td>
    </tr>
    <tr>
      <td>Jay</td>
      <td>Lennon</td>
      <td>[email protected]</td>
      <td></td>
      <td>Boston</td>
    </tr>
    <tr>
      <td>Helen</td>
      <td>Eaton</td>
      <td>[email protected]</td>
      <td></td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>