如何解决如何在单元格元素属性上过滤制表符
我想根据单元格样式过滤制表器表格中的数据,例如,显示所有验证失败的单元格。
文档中的所有示例均基于数据进行过滤,而自定义函数不会传递要过滤的单元格对象。
这里是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/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>
解决方法
使用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/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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。