dojo gridx 多选 模块
Gridx 多选模块可以让用户在表格中选择多个行或单元格。以下是使用 Gridx 多选模块的示例代码:
require([
'gridx/Grid',
'gridx/core/model/cache/Sync',
'gridx/modules/CellSelection',
'gridx/modules/RowHeader',
'gridx/modules/select/Row'
], function(Grid, Cache, CellSelection, RowHeader, RowSelect){
var grid = new Grid({
cacheClass: Cache,
structure: [
{id: 'id', field: 'id', name: 'ID', width: '40px'},
{id: 'name', field: 'name', name: 'Name', width: '200px'},
{id: 'age', field: 'age', name: 'Age', width: '80px'}
],
modules: [
CellSelection,
RowHeader,
RowSelect
],
selectRowTriggerOnCell: true,
selectRowMultiple: true,
selectRowCheckBox: true
});
grid.placeAt('gridContainer');
grid.startup();
});
在上面的示例代码中,我们使用了 CellSelection、RowHeader 和 RowSelect 模块。其中,CellSelection 模块可以让用户选择单元格,RowHeader 模块可以显示行头,RowSelect 模块可以让用户选择行。我们还设置了 selectRowTriggerOnCell、selectRowMultiple 和 selectRowCheckBox 属性,分别表示用户可以通过单元格触发行选择、可以选择多行和显示行选择复选框。
当用户选中行时,可以通过以下代码获取选中的行:
var selectedRows = grid.select.row.getSelected();
getSelected 方法返回一个数组,其中包含选中行的 ID。
除了使用 RowSelect 模块外,还可以使用 CellWidget 模块来自定义行选择复选框。以下是一个示例代码:
require([
'gridx/Grid',
'gridx/core/model/cache/Sync',
'gridx/modules/CellSelection',
'gridx/modules/RowHeader',
'gridx/modules/CellWidget'
], function(Grid, Cache, CellSelection, RowHeader, CellWidget){
var grid = new Grid({
cacheClass: Cache,
structure: [
{id: 'id', field: 'id', name: 'ID', width: '40px'},
{id: 'name', field: 'name', name: 'Name', width: '200px'},
{id: 'age', field: 'age', name: 'Age', width: '80px'}
],
modules: [
CellSelection,
RowHeader,
CellWidget
],
cellWidget: {
rowCheckBox: {
type: 'CheckBox',
setValue: function(rowData, value){
this.domNode.checked = value;
},
getValue: function(rowData){
return this.domNode.checked;
}
}
},
onCellWidgetCreated: function(cellWidget, rowId, colId){
if(colId === 'name'){
cellWidget.set('rowCheckBox', {});
}
}
});
grid.placeAt('gridContainer');
grid.startup();
});
在上面的示例代码中,我们使用了 CellWidget 模块来自定义行选择复选框。我们通过 cellWidget 属性指定了行选择复选框的类型和设置、获取值的方法。在 onCellWidgetCreated 事件中,我们将行选择复选框添加到第二列
原文地址: https://www.cveoy.top/t/topic/haYA 著作权归作者所有。请勿转载和采集!