ag-grid 表的选择复选框

Posted 2023-03-28

【中文标题】ag-grid 表的选择复选框

【英文标题】：selection checkbox for ag-grid table

【发布时间】：2016-01-21 03:10:04

【问题描述】：

我希望使用以下选项为 ag-grid 选择复选框： 但是没有看到左边的复选框。知道还需要进行哪些设置才能使选择复选框起作用。

self.appliancesInGroupGridOpts = 
        angularCompileRows: true,
        enableColResize : true,
        rowData: null,
        checkboxSelection: true,
        enableSorting: true,
        columnDefs: [
          
            valueGetter: 'data.name',
            headerName: $filter('translate')('APPLIANCE.NAME'),
            suppressSizeToFit : true,
            template: '<span class="appliance-name">data.name</span>',
            checkboxSelection: true,
            width: 200
           ,
           
            valueGetter: 'data.updated',
            headerName: $filter('translate')('APPLIANCE_GROUP.PUBLISH.MODIFICATION_TIME'),
            suppressSizeToFit : true,
            template: '<span class="appliance-updated">data.updated</span>',
            checkboxSelection: true,
            width: 200
           
        ] ,

【参考方案1】：

http://www.ag-grid.com/angular-grid-selection/index.php

复选框选择可以用在两个地方：

行选择 组选择。

要为列包含复选框选择，请设置属性

columnDefs: [
    valueGetter: 'data.name',
    headerName: $filter('translate')('APPLIANCE.NAME'),
    suppressSizeToFit : true,
    template: '<span class="appliance-name">data.name</span>',
    width: 200,   
    checkboxSelection: true
    ...

关于列定义。

您可以在任意多的列上设置此属性，但是，将其设置在表格的多个列中是没有意义的。

要启用组的复选框选择，请设置属性：

groupColumnDef: 
    headerName: "Athlete", 
    field: "athlete", 
    width: 200,
    cellRenderer: 
        renderer: "group",
        checkbox: true
    

用于组渲染器。有关组渲染器的详细信息，请参见分组部分。

选择组可以具有选择组行或选择组中所有子项的效果。这是通过设置属性来完成的：

groupSelectsChildren: true || false

当设置为false 时，选择组将选择组节点。

当设置为true 时，选择组将选择或取消选择所有子项。

下面的示例显示了带有组的复选框选择。选择组具有选择孩子的效果。同样，选择所有子项会自动选择组。在这种情况下，组本身永远不会出现在 selectedRows 列表中。

该示例还显示了一个用于选择年龄列的复选框。在实践中，选择的列多于两列是不正常的，下面只是为了演示。在非分组行中有一个复选框最适合不使用分组的网格。

另外：你可以在 col 定义中添加这个 复选框选择：

设置为true 以在列中呈现选择复选框。

【参考方案2】：

einav 说的是真的，但我认为他忘记了基本情况：

如果要启用选择，请在 gridOptions 上设置属性 rowSelection:'single' 或 rowSelection:'multiple' :)

属性 checkboxSelection 仅适用于列而不是网格选项。

以下属性与选择相关：

rowSelection： 行选择类型，设置为“单”或“多”以启用选择。 rowDeselection：设置为真或假。如果为真，那么如果您按住 ctrl + 单击行，则将取消选择行。网格的正常行为不允许取消选择节点（即，一旦选择了一个节点，它就会保持选中状态，直到在它的位置选择另一行）。 suppressRowClickSelection： 如果为 true，则单击时不会选择行。例如，当您想要选择复选框，并且不想在单击行时也选择时使用。

来自 Einav 提供的同一链接