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

Question

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

文档中的所有示例都是基于数据进行筛选，自定义函数不传递单元格对象进行筛选。

中的示例

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/tabulator-tables@4.7.2/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/tabulator-tables@4.7.2/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>Jordan.Talbot@ex.ai</td>
      <td>408 345 3433</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>Nico</td>
      <td>Rocha</td>
      <td>Nico.Rocha@ex.ai</td>
      <td>408 445 5656</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Cienna</td>
      <td>Bryan</td>
      <td>Cienna.Bryan@ex.ai</td>
      <td>210 454 7799</td>
      <td>Austin</td>
    </tr>
    <tr>
      <td>Vinny</td>
      <td>Hood</td>
      <td>Vinny.Hood@ex.ai</td>
      <td>540 672 2585</td>
      <td></td>
    </tr>
    <tr>
      <td>Jay</td>
      <td>Lennon</td>
      <td>Jay.Lennon@ex.ai</td>
      <td></td>
      <td>Boston</td>
    </tr>
    <tr>
      <td>Helen</td>
      <td>Eaton</td>
      <td>Helen.Eaton@ex.ai</td>
      <td></td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>

Answer 1

获取所有带有rowFormatter对象的线对象并使用getElement方法获取线元素<tr>以及验证以检查该线是否有效，例如这个：

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/tabulator-tables@4.7.2/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/tabulator-tables@4.7.2/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>Jordan.Talbot@ex.ai</td>
      <td>408 345 3433</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>Nico</td>
      <td>Rocha</td>
      <td>Nico.Rocha@ex.ai</td>
      <td>408 445 5656</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Cienna</td>
      <td>Bryan</td>
      <td>Cienna.Bryan@ex.ai</td>
      <td>210 454 7799</td>
      <td>Austin</td>
    </tr>
    <tr>
      <td>Vinny</td>
      <td>Hood</td>
      <td>Vinny.Hood@ex.ai</td>
      <td>540 672 2585</td>
      <td></td>
    </tr>
    <tr>
      <td>Jay</td>
      <td>Lennon</td>
      <td>Jay.Lennon@ex.ai</td>
      <td></td>
      <td>Boston</td>
    </tr>
    <tr>
      <td>Helen</td>
      <td>Eaton</td>
      <td>Helen.Eaton@ex.ai</td>
      <td></td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>

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

How to filter tabulator on cell element attributes

javascript

jquery

filtering

tabulator