单元格选择器
单元格的选择器选项。
描述
DataTables 的 cells()
和 cell()
方法提供了从表格中选择单个单元格的能力。选择哪些单元格以及选择器实际上如何操作由 cell-selector
数据类型控制。
选项
单元格选择器可以以多种不同的形式给出,以便于应用到您的数据和用例
- 无选择器 - 选择所有单元格
string
- jQuery 选择器node
- 可以为以下之一td
/th
单元格- 任何同时分配了
data-dt-row
和data-dt-column
属性的元素,或父项 (从:1.10.11 起)。这可供 FixedColumns 和 Responsive 等扩展使用,以允许轻松选择列。
function
- 函数选择器 (从:1.10.3 起)jQuery
- 单元格节点的 jQuery 对象object
- DataTables 单元格索引(row
和column
属性)array
- 包含上述任何选项组合的数组
无选择器
如果未给出选择器(更具体地说 undefined
),则选择所有单元格。
获取表格中所有单元格的节点
var table = new DataTable('#myTable');
var cells = table.cells().nodes();
字符串
当选择器作为字符串提供时,它被视为操作表格 tbody
中的 td
和 th
元素的 jQuery 选择器。有关 jQuery 选择器的可用选项的完整信息,请参阅 jQuery 选择器文档。
请注意,就像 jQuery 选择器一样,将选择器作为字符串时可以提供使用逗号分隔符号的多重选择器(也就是说,仅仅用逗号分隔即可)。
通过 ID 获取单个单元格的数据
var table = new DataTable('#myTable');
var data = table.cell('#cell-2-42').data();
按类名选择单元格
var table = new DataTable('#myTable');
var cells = table.cells('.priority');
按两个类名选择器选择单元格
var table = new DataTable('#myTable');
var cells = table.cells('.important, .intermediate');
节点
可以通过从该 DOM 元素中选择 DataTabels API 中的单元格,将 td
和 th
DOM 元素作为单元格选择器提供。这对于直接从单元格获取数据或执行其他基于单元格的操作很有用,例如在事件处理程序中,当您仅有供参考的 DOM 节点时。
获取单击单元格的数据
var table = new DataTable('#myTable');
$('#example tbody').on( 'click', 'td', function () {
var cellData = table.cell( this ).data();
// ... do something with `cellData`
} );
函数
要完全控制选择哪些单元格,可以提供一个含有自定义逻辑的函数来执行选择。该逻辑可以简单或复杂,只需在需要将单元格包括在选择结果中时返回 true
,在不需要时返回 false
即可执行选择。
这对于基于单元格包含的数据或基于单元格节点的属性来查找单元格特别有用。
该函数接收三个参数
- 单元格索引 - 请参阅
cell().index()
- 单元格数据 - 请参阅
cell().data()
。请注意,这是单元格的原始数据,如果你正在使用columns.render
,则它不是呈现的数据 - 单元格节点 - 请参阅
cell().node()
。请注意,如果你正在使用deferRender
,这可能为null
。
基于 selector-modifier
选项会为每个可选单元格调用一次该函数,该选项还定义了调用该函数的单元格的顺序。
获取包含 1
的所有单元格的节点
var table = new DataTable('#myTable');
var ones = table
.cells( function ( idx, data, node ) {
return data == 1 ?
true : false;
} )
.nodes();
// Add a class to the cells
ones.to$().addClass('highlight');
jQuery
非常类似于上面 node
类型(因为 jQuery 对象是 DOM 节点的类数组列表),可以将 jQuery 实例作为单元格选择器提供,选择器的匹配节点将被选中。表中 tbody
也可以选择。
获取 jQuery 实例中单元格的数据
var cells = $('td.immediate');
var table = new DataTable('#myTable');
var cellData = table.cells( cells ).data();
## Object
Similar to the `dt-type row-selector` and `dt-type column-selector`, `dt-type cell-selector` can also use indexes to select individual cells, but in this case an object is used which has `row` and `column` properties, each of which is set to the row and column index, respectively, for the cell to be selected.
Although not particularly useful as a primary selector method, this can be very useful for selecting individual cells based on a `dt-api cells()` call - see the example below.
###### Loop over all cells, adding a class if the data for the cell is greater than a given value.
```js
table.cells().every( function () {
if ( this.data() > 10 ) {
$(this.node()).addClass( 'important' );
}
} );
数组
上述任何选项的组合都可以作为选择器一起提供,提供选择多个单元格或混合选择器类型的方法,只需在数组中提供所需的选项即可。
基于 ID 获取两个单元格的数据
var table = new DataTable('#myTable');
var data = table.cells( ['#cell-1-42', '#cell-1-91'] ).data();
混合 cell-selector
类型 - id 和 class 选择器
var table = new DataTable('#myTable');
var data = table.cells( ['#cell-1-42', '.important'] ).data();