row().child() 从表中选中行设置/获取子行文档(Options & API) DataTables中文网

描述(Description)

Datatables可以显示每一行（在本文档中称为“父行”以区别与子行）的子行。该子行附加到每个父行，例如，可用于提供有关父行的额外信息或编辑表单。子行始终放在父行的后面（如果子行被指定可见，可以使用方法操作），无论其表格排序还是应用于表格的搜索词如何。如果父行在数据表的当前视图中不可见，则子行也将不可见。

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

父行可以一次附加一个或多个子行。但是，API将子行视为一体，也就是说，它们既可以全部显示，也可以全部隐藏。

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

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

类型(Types)

function row().child()

描述(Description):

获取已为父行设置的子行

返回(Returns):

jQueryType ， undefinedType

jQuery对象，其结果集中有父行的子行，如果尚未为父行设置子行，则为undefined。

function row().child( showRemove ) _{从1.10.1版本支持}

描述(Description):

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

参数(Parameters):

	名称（Name）	类型（Type）	是否可选（Optional）
1	`showRemove`	`booleanType`	No
	此参数可以指定为`true`或`false`： `true`，附加到父级的任何子级行将立即变为可见。这相当于使用 `row().child.show()API` `false`，如果父行当前有任何子行（无论显示与否），此方法将销毁那些子行，并在适当的情况下将其从DOM中删除。与 `row().child.hide()API` 方法不同，此选项从Datatables保留的内存数据中完全删除行。这相当于使用 `row().child.remove()API` 。

返回(Returns):

DataTables.ApiType

Datatables API实例

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

描述(Description):

设置数据以显示到子行中。请注意，调用此方法将替换所有已经附加到父行的子行。

参数(Parameters):

	名称（Name）	类型（Type）	是否可选（Optional）
1	`data`	`stringType` ， `nodeType` ， `jQueryType` ， `arrayType`	No
	子行中显示的数据可以通过多种不同方式给出： `string`，作为字符串，创建单个子行，并将数据插入该子行中的单个单元格。 `node`，作为 `trTag` 元素， `trTag` 元素作为子行。如果你希望在子行中定义多个列，这将很有用。 `jQuery`，多个节点的jQuery对象。如果jQuery结果集中有多个元素，则将它们添加为多行。如果节点是 `trTag` 元素，则将其视为子行，否则将自动创建行和单元格，并将jQuery结果集中的节点插入其中。 `array`，通过将上述任何一个选项作为数组传递，可以一次添加多个子行。比如，你可以传入一个包含两个字符串元素的组数，已创建两个子行，每个子行使用字符串内容。
2	`className`	`stringType`	Yes - default:
	当Datatables生成子行时，添加到子行的 `tdTag` 单元格的类名。从1.10.1版本开始，它也被添加到子行的 `trTag` 行节点。向子行添加其他样式信息以指示他是表数据的一部分时，它是正常显示之外的其他信息，这是很有用的。请注意，如果在第一个参数中给出了节点或包含jQuery对象的节点，则不会自动添加类名（假定现有的行已经按要求配置）

返回(Returns):

DataTables.ApiType

Datatables API实例

例子(Example)

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

var table = $('#example').DataTable();
 
$('#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');
    }
} );

function format(data){
    return "<span style='color:red'>"+data+"</span>"
}

给一个可见父行创建多个子行：

var table = $('#example').DataTable();
 
table.row( ':eq(0)' ).child( [
        'First child row',
        'Second child row',
        'Third child row'
    ] )
    .show();

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

var table = $('#example').DataTable();
 
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();
} );