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();
});

在上面的示例代码中,我们使用了 CellSelectionRowHeaderRowSelect 模块。其中,CellSelection 模块可以让用户选择单元格,RowHeader 模块可以显示行头,RowSelect 模块可以让用户选择行。我们还设置了 selectRowTriggerOnCellselectRowMultipleselectRowCheckBox 属性,分别表示用户可以通过单元格触发行选择、可以选择多行和显示行选择复选框。

当用户选中行时,可以通过以下代码获取选中的行:

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 事件中,我们将行选择复选框添加到第二列

dojo gridx 多选 模块

原文地址: https://www.cveoy.top/t/topic/haYA 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录