1

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

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

4

3 回答 3

1

有一个类似于 jquery 版本的 Kendo 网格的React 示例。这个想法是您现在可以使用 React 组件来获取详细信息。例如，您可以将另一个网格放入模板 Grid 以获取层次结构。

class DetailComponent extends GridDetailRow {
render() {
    return (
        <Grid data={this.props.dataItem.details}>
        </Grid>
    );
}
}
// ...
// ...
 <Grid
       detail={DetailComponent}
       expandField="expanded"
       expandChange={this.expandChange}
 >
于 2018-01-25T07:19:51.543 回答
0

这是 react-data-grid 的维护者之一。

我们认为剑道示例代表 2 个不同的特征：-

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

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

嵌套网格是经常被请求的东西，但不幸的是，目前我们目前不支持它。但是，这在未来可能会改变。

HTH @jpdriver

于 2017-06-12T08:39:59.557 回答
-1

有很多方法可以做，但最简单的也许你可以通过单击单元格的键来设置组件的状态，并在函数中创建组件，传递值是否应该折叠，并返回折叠或不是该单元格的组件并呈现它。

于 2017-06-09T16:16:18.940 回答