kendo ui Grid & React : selecttable row allows to select one row in each page
kendoui Grid & React : selectable row allows to select one row in each page
通过设置selectable: row
。网格允许您 select 每个页面中的一个项目。我只想 select 网格中只有一行并将 selected 行限制为 1。
<Grid
{...{
dataSource: dataSource,
sortable: sortable,
selectable: selectable,
scrollable: false,
navigatable: true,
filterable: filterable,
allowCopy: allowCopy,
pageable: pageable,
perPage: perPage,
editable: editable,
change: e => e.sender.selectedKeyNames()),
persistSelection: true,
columns: [
{
template: "<span class='sl-select-check'></span>",
attributes: { class: 'sl-select-check-td' }
},
...columns
]
}}
/>
使用 React 中实现的新版 Kendo 网格会更容易:
https://www.telerik.com/kendo-react-ui/components/grid/selection/
在此演示中,选择代码是完全可自定义的,并且项目是否被选中的状态在项目本身中。
if (!event.nativeEvent.ctrlKey) {
this.state.data.forEach(item => item.selected = false);
}
//this works across pages.
通过设置selectable: row
。网格允许您 select 每个页面中的一个项目。我只想 select 网格中只有一行并将 selected 行限制为 1。
<Grid
{...{
dataSource: dataSource,
sortable: sortable,
selectable: selectable,
scrollable: false,
navigatable: true,
filterable: filterable,
allowCopy: allowCopy,
pageable: pageable,
perPage: perPage,
editable: editable,
change: e => e.sender.selectedKeyNames()),
persistSelection: true,
columns: [
{
template: "<span class='sl-select-check'></span>",
attributes: { class: 'sl-select-check-td' }
},
...columns
]
}}
/>
使用 React 中实现的新版 Kendo 网格会更容易: https://www.telerik.com/kendo-react-ui/components/grid/selection/ 在此演示中,选择代码是完全可自定义的,并且项目是否被选中的状态在项目本身中。
if (!event.nativeEvent.ctrlKey) {
this.state.data.forEach(item => item.selected = false);
}
//this works across pages.