Question

如何使用react-data-grid实现行详细信息和扩展/折叠自定义详细信息组件？

我有用户表，我希望能够在点击/双击用户行后看到用户详细信息。这样的事情：http://demos.telerik.com/kendo-ui/grid/detailtemplate。可以使用这个组件吗？

Answer 1

有一个example for React类似于Kendo网格的jquery版本。我们的想法是，您现在可以将React组件用于详细信息。例如，您可以将另一个网格放入模板网格中以获得层次结构。

class DetailComponent extends GridDetailRow {
render() {
    return (
        <Grid data={this.props.dataItem.details}>
        </Grid>
    );
}
}
// ...
// ...
 <Grid
       detail={DetailComponent}
       expandField="expanded"
       expandChange={this.expandChange}
 >

Answer 2

这是反应数据网格的维护者之一。

我们将剑道示例视为代表两种不同的功能： -

在可扩展树视图中嵌套数据的能力
将任何组件（例如子网格）渲染为该子视图的能力

目前，我们只支持前者（见http://adazzle.github.io/react-data-grid/examples.html#/tree-view）

嵌套网格经常被要求，但不幸的是，目前我们还不支持它。但是，这可能在将来发生变化。

HTH @jpdriver

Answer 3

有很多方法可以做，但最简单的可能是你可以设置组件的状态，单击单元格的键，然后在函数中创建组件，如果应该折叠或者不传递值，并返回该单元格的折叠或非组件并进行渲染。

如何展开/折叠行详细信息？

3 个答案: