我怎样才能 select 在 table(grid) 中只有一行?
How can I select only one row in a table(grid)?
我有一个用于选择内部的网格(https://www.telerik.com/kendo-react-ui/components/grid/selection/)。我实际上有一个数据数组,例如:
[{title:'test' ,id:1 ,selected :false}
{title:'test2' ,id:2 ,selected :false}
{title:'test2' ,id:3 ,selected :false}]
使用此方法,当用户单击一行时,它(selected)变为真:
selectionChange = (event) => {
const data = this.state.items.map(item=>{
if(item.Id === event.dataItem.Id){
item.selected = !event.dataItem.selected;
}
return item;
});
}
在这种情况下,用户可以select任何行,但我希望能够select只有一行.....
我想要的是只有一行是 selected.In 事实上,无论是 select 行,其他行都是 selected :false
selectionChange = (event) => {
const data = this.state.items.map(item =>{
item.selected = item.Id === event.dataItem.Id;
return item;
});
}
一个简单的方法是将所有项目=> selected 设置为 false,将唯一匹配的项目设置为 true。
这里如果选中了item,则变为false,其他都为false,如果没有选中,则变为true,其他都选中为false。
const data = this.state.data.map(item=>{
if(item.ProductID === event.dataItem.ProductID){
item.selected = !event.dataItem.selected;
return item;
}
item.selected = false;
return item;
});
查看更新后的 fiddle
https://stackblitz.com/edit/react-7wmlfp?file=app/main.jsx
我有一个用于选择内部的网格(https://www.telerik.com/kendo-react-ui/components/grid/selection/)。我实际上有一个数据数组,例如:
[{title:'test' ,id:1 ,selected :false}
{title:'test2' ,id:2 ,selected :false}
{title:'test2' ,id:3 ,selected :false}]
使用此方法,当用户单击一行时,它(selected)变为真:
selectionChange = (event) => {
const data = this.state.items.map(item=>{
if(item.Id === event.dataItem.Id){
item.selected = !event.dataItem.selected;
}
return item;
});
}
在这种情况下,用户可以select任何行,但我希望能够select只有一行.....
我想要的是只有一行是 selected.In 事实上,无论是 select 行,其他行都是 selected :false
selectionChange = (event) => {
const data = this.state.items.map(item =>{
item.selected = item.Id === event.dataItem.Id;
return item;
});
}
一个简单的方法是将所有项目=> selected 设置为 false,将唯一匹配的项目设置为 true。
这里如果选中了item,则变为false,其他都为false,如果没有选中,则变为true,其他都选中为false。
const data = this.state.data.map(item=>{
if(item.ProductID === event.dataItem.ProductID){
item.selected = !event.dataItem.selected;
return item;
}
item.selected = false;
return item;
});
查看更新后的 fiddle https://stackblitz.com/edit/react-7wmlfp?file=app/main.jsx