![](/img/trans.png)
[英]Header checkbox selection for React ag-grid (infinite row model)
[英]ag-grid header checkbox selecting all the rows even the row that doesn't has the checkbox
我已经实现了一个网格,其中包含除第一行(最后一行没有复选框)外第一行带有复选框的行。
const colDef = {
headerCheckboxSelection: this.forCheckbox,
checkboxSelection: this.forCheckbox
}
forCheckbox(params) {
const displayedColumns = params.columnApi.getAllDisplayedColumns();
if (params.node) {
return (displayedColumns[0] === params.column &&(params.node.data.myColNameValue !== '');
}
return (displayedColumns[0] === params.column);
}
所以myColNameValue
是''
只为最后一排。 由于这种情况,网格的最后一行将没有复选框。 但是,当我单击标题复选框时,它将检查并选择所有行以及最后一行,即使它没有复选框也是如此。
实现isRowSelectable()函数并为不想选择的行返回false
看到这里-https://www.ag-grid.com/javascript-grid-selection/#selectable-rows-with-header-checkbox
在下面的代码(ag-grid Javascript)中,只能选择year <2007的行。
constructor(private http: HttpClient) {
this.columnDefs = [
{
headerName: "Athlete",
field: "athlete"
},
{
headerName: "Age",
field: "age"
},
{
headerName: "Country",
field: "country",
headerCheckboxSelection: true,
checkboxSelection: true
},
{
headerName: "Year",
field: "year"
},
{
headerName: "Date",
field: "date"
},
{
headerName: "Sport",
field: "sport"
},
{
headerName: "Gold",
field: "gold"
},
{
headerName: "Silver",
field: "silver"
},
{
headerName: "Bronze",
field: "bronze"
},
{
headerName: "Total",
field: "total"
}
];
this.rowSelection = "multiple";
this.isRowSelectable = function(rowNode) {
return rowNode.data ? rowNode.data.year < 2007 : false;
};
this.defaultColDef = { width: 200 };
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.