reactjs - 如何在反应引导表2标题单元格中向单元格添加复选框?
问题描述
我正在使用 react-bootstrap-table-next 并想在某些标题单元格中添加“复选框”。我参考了文档- https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Welcome&selectedStory=react%20bootstrap%20table%202%20&full=0&addons=1&stories= 1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel 但找不到相关示例。有人可以帮忙吗?
import BootstrapTable from 'react-bootstrap-table-next';
class Container extends React.Component{
render(){
<BootstrapTable keyField="PartNumber" selectRow={selectRowProp}
data={this.state.data} columns={this.state.columns}/>
}
}
标题单元格中复选框的预期输出 -
解决方案
我使用“headerFormatter”来自定义标题单元格。下面是工作代码和输出截图
state = {
columns: MYResult.ParametricList_Attributes || []
};
componentDidMount(){
const checkbox = (column, colIndex) => {
//console.log(colIndex)
//console.log("column text "+column.text)
if("Part Number"==column.text || "Product Line"==column.text){
return (
<div>
{column.text}
<span><input type="checkbox" name="something" value="" /></span>
</div>
);
}else{
return (
<div>
{column.text}
</div>
)
}
}
const newColumn = this.state.columns.map((column) => {
//console.log("column --"+column.text)
return {...column, headerFormatter: checkbox};
});
//console.log("newColumn --"+newColumn)
this.setState({columns: newColumn });
}
推荐阅读
- xamarin - Xamarin.Forms UWP 应用 Xamarin 编辑器视图不会显示内容
- api - Google plus API 折旧
- javascript - vue.js 方法返回不断更新
- python - 根据范围获取存储在 pandas 数据框列中的值的频率计数,并由分类变量分隔
- c - 在基本 C 编程中使用“If 语句”。如何正确格式化它们?
- javascript - Express - 获取 router.get 以返回 json 数据属性
- java - 使用 JAVA - 如何在不使用数组的情况下计算输入字符串的总和及其长度?
- jquery - Bootstrap 4 在按钮中加载微调器
- python - 退出编译的python代码时出现NSTouchbar异常
- javascript - 任何