row().child()

自 DataTables 1.10 起

获取/设置选定主表行的子行。

描述

DataTables 能够为每行显示子行（在本文档中称为“父行”，以区别于子行）。这些子行附加到每个父行，例如，可以用来提供有关父行的更多信息或编辑表单。子行始终放置在父行的正下方（如果子行被指定为可见，使用 row().child.show() 方法），无论排序、应用于表的搜索词等。如果父行在 DataTables 的当前视图中不可用，子行也将不可见。

子行的内容完全独立于主表（除了它们在文档中的位置）。应用于表的排序、搜索等对子行的顺序没有影响。每个子行通常包含一个单元格，该单元格的 colspan 属性设置为跨越整个表宽度，因此单元格的内容覆盖整个表宽度。但是，也可以传入一个 tr 元素，该元素具有多个单元格（每个表列一个单元格），以便以与主表相同的列结构显示子行数据。

一个父行可以一次附加一个或多个子行。但是，子行被 API 视为一个实体，这意味着它们要么全部显示，要么全部隐藏。

此外，子行可以在隐藏后保留，以便在需要时可以快速轻松地再次显示。隐藏行使用 row().child.hide() 执行。还可以使用 row().child.remove() 或将 false 作为唯一参数的此方法来销毁子行（隐藏并释放其分配的内存），如果不再需要子行。

请注意，此方法不会在创建子行时自动使添加的子行可见。使用 row().child().show() 链式方法（或根据需要使用 row().child.show()）。

类型

function row().child()

描述: 获取为父行设置的子行。
返回: jQuery，undefined

包含父行子行的 jQuery 对象，如果尚未为父行设置任何子行，则为 undefined。

自 1.10.1 起

function row().child( showRemove )

描述

显示或删除并销毁选定行的子行。

参数

名称类型可选

	名称	类型	可选
1	`showRemove`	`布尔值`	否
	此参数可以设置为 `true` 或 `false` `true`: 附加到父行的任何子行将立即变为可见。这等效于使用 `row().child.show()`。 `false`: 如果父行当前有任何子行附加到它（无论是否显示），此方法将销毁这些子行，如果适当，将它们从 DOM 中删除。与 `row().child.hide()` 方法不同，此选项会完全从 DataTables 持有的内存中删除这些行。这等效于使用 `row().child.remove()`。

showRemove

布尔值

否

此参数可以设置为 true 或 false

true: 附加到父行的任何子行将立即变为可见。这等效于使用 row().child.show()。
false: 如果父行当前有任何子行附加到它（无论是否显示），此方法将销毁这些子行，如果适当，将它们从 DOM 中删除。与 row().child.hide() 方法不同，此选项会完全从 DataTables 持有的内存中删除这些行。这等效于使用 row().child.remove()。

返回

DataTables.Api

DataTables API 实例

function row().child( data [, className ] )

描述

设置要在子行中显示的数据。请注意，调用此方法将替换已附加到父行的任何子行。

参数

	名称	类型	可选
1	`数据`	`string`，`node`，`jQuery`，`array`	否
	要在子行中显示的数据可以以多种不同的方式提供 `string` - 作为一个字符串，创建一个子行，并将数据插入该子行的单个单元格中。 `node` - 作为一个 `tr` 元素，该 `tr` 元素用作子行。如果您希望在子行中定义多个列，这将非常有用。 `jQuery` - 一个包含要添加的节点的 jQuery 对象。如果 jQuery 结果集中有多个元素，则将它们添加为多行。如果节点是 `tr` 元素，则将其视为子行，否则会自动创建行和单元格，并将 jQuery 结果集中的节点插入其中。 `array` - 可以通过将上述任何选项作为数组传入来一次添加多个子行。例如，您可能会传入包含两个字符串元素的数组来创建两个子行，并将字符串内容用于每个子行。
2	`className`	`字符串`	是 - 默认
	当 DataTables 生成子行时，添加到子行 `td` 单元格节点的类名。从 1.10.1 开始，它也添加到子行 `tr` 行节点。这对于向子行添加额外的样式信息很有用，以指示虽然它是表数据的一部分，但它是在通常显示的内容之外的附加信息。请注意，如果在第一个参数中给出了 `node` 或包含节点的 jQuery 对象，则不会自动添加类名 - 假设现有的行已根据需要配置。

返回

DataTables.Api

DataTables API 实例

示例

根据当前状态显示/隐藏行，并根据需要添加行内容。

var table = new DataTable('#myTable');

$('#example tbody').on('click', 'td.details-control', function () {
	var tr = $(this).parents('tr');
	var row = table.row(tr);

	if (row.child.isShown()) {
		// This row is already open - close it
		row.child.hide();
		tr.removeClass('shown');
	}
	else {
		// Open this row (the format() function would return the data to be shown)
		row.child(format(row.data())).show();
		tr.addClass('shown');
	}
});

为表中的单个行创建多个子行 - 第一可见行。

var table = new DataTable('#myTable');

table
	.row(':eq(0)')
	.child(['First child row', 'Second child row', 'Third child row'])
	.show();

向所有行添加子行，传入一个 jQuery 创建的 tr 元素，并显示所有子行

var table = new DataTable('#myTable');

table.rows().every(function () {
	this.child(
		$(
			'<tr>' +
				'<td>' +
				rowIdx +
				'.1</td>' +
				'<td>' +
				rowIdx +
				'.2</td>' +
				'<td>' +
				rowIdx +
				'.3</td>' +
				'<td>' +
				rowIdx +
				'.4</td>' +
				'</tr>'
		)
	).show();
});