固定数据表答案

【问题标题】：Fixed Data Table固定数据表
【发布时间】：2016-01-04 20:05:04
【问题描述】：

我正在寻找有关固定数据表的示例。

https://facebook.github.io/fixed-data-table/

我想要一些这些专业：

-添加、删除或更新行。

-可编辑单元格。

我找不到有关这些专业的文档。您能推荐任何文档或示例吗？

【问题讨论】：

标签： javascript jquery twitter-bootstrap jquery-ui reactjs

【解决方案1】：

在此文档中：http://facebook.github.io/fixed-data-table/#basic-example

您会注意到rows 对象是表所采用的数据数组。如果您将其存储在组件的状态中（或者更好的是，存储在像 Redux 这样的数据存储中），当您从数组中添加、删除或更新该行时，表应该会自动更新。该表本身不为您提供任何此功能，因为它超出了项目的范围。它所做的只是有效地处理大量数据并很好地呈现它，因此您不必担心 CSS。

简而言之，您必须添加对表所依赖的基础数据进行操作的功能。

【讨论】：

【解决方案2】：

使用固定数据的好处是可以在数组或对象上操作整个表。

我假设您正在研究 React。如果你能提到这一点，那就太好了。考虑以下代码

`
<Table 
    rowHeight={40}
    rowsCount={this.state.data.length} //source of the table
    width={900}
    height={300}
    headerHeight={50}
/>
  `

rowsCount 将等于“数据”中的条目数。要增加按钮上的行，请单击

`<Button onClick={this.handleClick}`

这将向表中添加一个新行，并且由于只要有 setState 就会调用 render 方法，因此新行会添加到表中。

`handleClick=()=>{
    this.setState({data:[...this.state.data,[]]})
}`

同样的原则也适用于删除。您只需删除索引并执行 setState。

【讨论】：