如何以编程方式控制行的切换？

Posted 2023-02-22

【中文标题】如何以编程方式控制行的切换？

【英文标题】：How to control programmatically the toggling of a row?

【发布时间】：2019-12-18 23:20:19

【问题描述】：

我正在使用带有 REACT 的 MaterialTable（基于 Material-UI Table.material-table.com 的 React 数据表）更准确地说是详细面板 - material-table.com/#/docs/features/detail-panel

我需要什么？用户应该打开/关闭详细的面板并在它们之间拖放项目。

问题：每次我 React 渲染表格时，所有详细面板都会关闭。

我正在寻找一种解决方案，允许我为每一行设置一个标志，以表明它是隐藏的还是打开的。所以在渲染时.. React 不会自动关闭所有行。

我尝试在表格和面板上设置选项和事件 - 没有一个能够控制行切换。

代码很简单：

<MaterialTable
           title = "Group Keywords Preview"
           columns = [
                  title : "Group", field : "group" ,
                  title : "Weight", field : "weight" 
           ]
           options=
               selection: true
           
           data =  my data ...
           detailPanel = [
                    
                        tooltip : 'Show Group',
                        render : rowData => 
                              return <my react component .. />
                        
                    
            ]

/>

material-table 是否有任何标志/方法来以编程方式切换行？ 我可以用另一种方式吗？

提前致谢。

【参考方案1】：

class DetailPanelWithRowClick extends React.Component 
  constructor(props) 
    super(props);
    
    this.tableRef = React.createRef();
  
  

  render() 
    return (
    <>
      <MaterialTable
        tableRef=this.tableRef
        columns=[
           title: 'Name', field: 'name' ,
           title: 'Surname', field: 'surname' ,
           title: 'Birth Year', field: 'birthYear', type: 'numeric' ,
          
            title: 'Birth Place',
            field: 'birthCity',
            lookup:  34: 'İstanbul', 63: 'Şanlıurfa' ,
          ,
        ]
        data=[
           name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 ,
           name: 'Zerya Betül', surname: 'Baran', birthYear: 1987, birthCity: 63 ,
        ]
        title="Detail Panel With RowClick Preview"
        detailPanel=rowData => 
          return (
            <iframe
              
              
              src="https://www.youtube.com/embed/C0DPdy98e4c"
              frameborder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
            />
          )
        
        onRowClick=(event, rowData, togglePanel) => togglePanel()
      />
      <button onClick=() => 
        this.tableRef.current.onToggleDetailPanel([0], rowData => <div>rowData.name</div>)
      >toggle second line</button>
      </>
    )
  

你可以按照上面的例子使用。

【参考方案2】：

是的，您可以这样做。材料表通过向每个项目添加一个 tableData 对象来改变您的数据。

看起来像这样：

"tableData":"id":0,"checked":true

这控制行ID，如果项目被选中以及过滤等其他事情。 通过将选中的键更改为 true/false，您可以通过编程方式控制项目的选择。

希望这会有所帮助。编码愉快。

【讨论】：

感谢您的帮助。不幸的是，这在这里无济于事。我需要在行或面板上进行一些切换操作，而不是在数据上。除此之外，还有设置“检查”、“过滤”等选项，但没有设置“行打开/关闭”的选项

详细信息面板也通过 toggleDetailPanel 功能保存在其中。也许您可以使用它？

他们有文档页面还是只有material-table.com（更像示例和代码？

他们没有记录，因为这是内部数据处理。但你可以劫持它。