[英]ag-grid header checkbox selecting all the rows even the row that doesn't has the checkbox
I have implemented a grid that contains rows with checkbox for first column except the last row(ie, doesn't have any checkbox for last row). 我已经实现了一个网格,其中包含除第一行(最后一行没有复选框)外第一行带有复选框的行。
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);
}
so myColNameValue
is ''
only for the last row. 所以
myColNameValue
是''
只为最后一排。 And because of this condition last row of the grid will not have checkbox. 由于这种情况,网格的最后一行将没有复选框。 But when I am clicking on the header checkbox it is checking and selecting all the rows along with the last row as well even though it doesn't has a checkbox.
但是,当我单击标题复选框时,它将检查并选择所有行以及最后一行,即使它没有复选框也是如此。
Implement isRowSelectable() function and return false for the row which you don't want to be selected 实现isRowSelectable()函数并为不想选择的行返回false
See here - https://www.ag-grid.com/javascript-grid-selection/#selectable-rows-with-header-checkbox 看到这里-https://www.ag-grid.com/javascript-grid-selection/#selectable-rows-with-header-checkbox
In below code (ag-grid Javascript) only rows with year < 2007 are selectable. 在下面的代码(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.