时间戳

首页 > 解决方案 > 如何在按钮的onclick事件上以编程方式选择材料表的行-React js

javascript - 如何在按钮的onclick事件上以编程方式选择材料表的行-React js

问题描述

我正在使用 Material-Table 。我需要根据某些条件在单击按钮时选择多行。条件写在下面的代码中。谁能指导我如何根据某些条件选择多行？

 <MaterialTable
                            icons={tableIcons}title=""

                            columns={[
                                { title: 'Project Name', field: 'Project_Name', render: rowData => <Link to='/projectdetails'>{rowData.Project_Name}</Link> },
                                { title: 'Methods Covered', field: 'Methods_Covered', type: 'numeric' },
                                { title: 'Methods not Covered', field: 'Methods_not_Covered', type: 'numeric' },
                                { title: 'Total Methods', field: 'Total_Methods', type: 'numeric' },

                                    ]}

                            data={this.state.results}


                            components={{
                                Toolbar: props => (
                                    <div>
                                        <MTableToolbar {...props} />
                                        <div className="Mtable">

                                       
                                            <div>
                                                <Button color="primary" onClick={rowData => 
                                                 (rowData.Methods_Covered ? 
                                                  rowData.tableData.checked = true : 
                                                  rowData.tableData.checked = false)}>
                                                 select Highlighted</Button>
                                            </div>
                                            
                                        </div>
                                      
                                    </div>
                                ),
                            }}
                            onSelectionChange={this.handleSelect}
                            onRowClick={this.handleRowClick}
                            options={{
                                sorting: true,
                                selection: true,
                                search: true,
                                searchAutoFocus: true,
                                searchFieldAlignment: 'right',
                                searchFieldStyle: {
                                    border: 'solid black 2px',
                                },
                              }}
  />

标签： javascriptreactjsonclickmaterial-table

解决方案

我没有尝试过OP的代码，但是有这个问题的人可以检查MaterialTable的props的selectionProps属性：options

options={{
  sorting: true,
  selection: true,
  search: true,
  searchAutoFocus: true,
  searchFieldAlignment: 'right',
  searchFieldStyle: {
      border: 'solid black 2px',
  },
  selectionProps: ({ tableData: { checked } }) => ({
    checked
  }),
}}

请在此处查看最后一个示例：https ://material-table.com/#/docs/features/selection

以及此处的选项文档：https ://material-table.com/#/docs/all-props

推荐阅读