如何同时使用列复选框和行选择功能？答案

【问题标题】：How can I use the column check box and row selection function together?如何同时使用列复选框和行选择功能？
【发布时间】：2019-03-04 23:15:51
【问题描述】：

单击复选框选择行。如何将复选框列选择与行选择分开？..

选择 HeaderCheckbox 表中的所有行。如何只选择当前页面行？

请帮帮我...

// colDefs
{ 
    id: 'checkbox',
    checkboxSelection: true,
    headerCheckboxSelection: true,
    headerCheckboxSelectionFilteredOnly: true,
    suppressMenu: true,
    filter: false,
    floatingFilter: false,
    suppressFilter: true,                  
    floatingFilterComponentParams: { suppressFilterButton: true },
    width: 55,
    editable: false,
}

//gridOptions
{
  ...,
  rowSelection: 'multiple',
}

编辑：

使用的库是：https://www.ag-grid.com/

【问题讨论】：

你能添加你的实际代码吗？
请编辑问题以获得代码。

标签： javascript reactjs ag-grid

【解决方案1】：

对于您的第一部分，您可以使用 cellRenderer 将复选框添加到列，然后在用户选择复选框时实现您自己的逻辑。

var defaultCols = [{
        field: "Select",
        cellRenderer: chkCellRenderFunc
    },
    {
        field: "ColumnA",
        minWidth: 80
    },
    {
        field: "ColumnB",
        width: 150
    },
    {
        field: "ColumnC",
        minWidth: 80
    }
]

function chkCellRenderFunc(params) {
    var chk = document.createElement('input');
    chk.type = "checkbox";
    chk.checked = params.data.Select;
    chk.addEventListener('change', function () {
            //Add your logic for checkbox change event 
        }
        params.api.getFilterInstance('Select').resetFilterValues();
    });
return chk;
}

【讨论】：