angular - 渲染器检查的 ag-grid 复选框列
问题描述
我正在使用带有复选框标题组件的 ag-grid 来允许选择/取消选择所有行。现在,当我获取网格数据时,我想根据某些字段值选中/取消选中复选框列。我尝试了一个渲染器,但它不适用于下面的代码。如果我从列定义中删除“checkboxSelection”,它会完美运行。
this.gridClientOptions = {
enableFilter: true,
enableSorting: true,
enableColResize: true,
pagination: true,
paginationPageSize: 5,
rowSelection: 'multiple',
suppressRowClickSelection: true,
columnDefs: [
{
headerName: '',
width: 40,
headerCheckboxSelection: true,
headerCheckboxSelectionFilteredOnly: true,
checkboxSelection: true,
cellRenderer: 'selectedClient'
},
{headerName: 'Client Code', field: 'clientCode'},
{headerName: 'Client Name', field: 'clientName'},
{headerName: 'Group Name', field: 'groupName'},
],
components: {
'selectedClient': this.selectedClient
},
getRowStyle: function(params) {
if (params.node.rowIndex % 2 === 0) {
return { background: '#dfffdf' }
}
}
}
selectedClient(params) {
return params.data.assignmentId > 0 ? `<input type='checkbox' checked>` : `<input type='checkbox'>`;
}
解决方案
我在https://embed.plnkr.co/awEnTpOLOuXDereXrYi0/为您构建了一个成功可行的项目。
正如您在下面看到的那样,我删除了 headerCheckboxSelection、headerCheckboxSelectionFilteredOnly 和 checkboxSelection,并使 cellRenderer 内联实现而不是 selectedClient,并且一切正常。
var data = [
{'clientCode':1,'clientName':'client1', 'groupName' : 'groupA', 'assignmentId':1},
{'clientCode':2,'clientName':'client2', 'groupName' : 'groupA', 'assignmentId':0},
{'clientCode':3,'clientName':'client3', 'groupName' : 'groupA', 'assignmentId':1},
];
var gridOption = {
enableFilter: true,
enableSorting: true,
enableColResize: true,
pagination: true,
paginationPageSize: 5,
rowSelection: 'multiple',
suppressRowClickSelection: true,
rowData: data,
columnDefs: [
{
headerName: '',
width: 40,
editable: true,
cellRenderer: params => {
return `<input type='checkbox' ${params.value ? 'checked' : ''} />`;
},
field: 'assignmentId'
},
{headerName: 'Client Code', field: 'clientCode'},
{headerName: 'Client Name', field: 'clientName'},
{headerName: 'Group Name', field: 'groupName'},
],
getRowStyle: function(params) {
if (params.node.rowIndex % 2 === 0) {
return { background: '#dfffdf' }
}
}
};
var mygrid = new agGrid.Grid(document.querySelector('#myGrid'),gridOption);
如果您想要一个标题选择,并且在加载数据时选择所有过滤的行,请使用以下源。实际上,我已经为要过滤的行添加了一个 RowDataChange 侦听器 setSelected(true) (assignmentId > 0):
var data = [
{'clientCode':1,'clientName':'client1', 'groupName' : 'groupA', 'assignmentId':1},
{'clientCode':2,'clientName':'client2', 'groupName' : 'groupA', 'assignmentId':0},
{'clientCode':3,'clientName':'client3', 'groupName' : 'groupA', 'assignmentId':1},
];
var gridOption = {
enableFilter: true,
enableSorting: true,
enableColResize: true,
pagination: true,
paginationPageSize: 5,
rowSelection: 'multiple',
suppressRowClickSelection: true,
rowData: data,
columnDefs: [
{
headerName: '',
width: 40,
editable: true,
headerCheckboxSelection: true,
headerCheckboxSelectionFilteredOnly: false,
checkboxSelection: true,
},
{headerName: 'Client Code', field: 'clientCode'},
{headerName: 'Client Name', field: 'clientName'},
{headerName: 'Group Name', field: 'groupName'},
],
getRowStyle: function(params) {
if (params.node.rowIndex % 2 === 0) {
return { background: '#dfffdf' }
}
},
onRowDataChanged: event => {
event.api.forEachNode( function(rowNode, index) {
if(rowNode.data.assignmentId > 0)
rowNode.setSelected(true);
});
}
};
this.isRowSelectable = function(rowNode) {
return rowNode.data ? rowNode.data.year < 2007 : false;
};
var mygrid = new agGrid.Grid(document.querySelector('#myGrid'),gridOption);
新来源的输出:
推荐阅读
- visual-studio-2019 - 在 Visual Studio 中删除代码后的空格
- python - 如何在 Tkinter 中使用 Copyleaks API?
- powershell - 以其他用户身份运行带变量的命令
- php - 使用 PHP 中另一个字段的值更新 MongoDB 字段
- wordpress - final (1).jpg 上传出错。请稍后再试。请帮我解决这个错误
- javascript - 将插入符号移动到 contenteditable 元素中新添加元素的末尾
- spring - Junit 测试用例无法自动装配/注入由 spring 框架创建的 bean,该框架通过 jetty 服务器启动
- ruby-on-rails - Rails API 如何在异常中添加错误并继续
- guidewire - 创建曝光时获取 DBNullConstraintException
- python - 类型错误:添加的不支持的操作数类型:“int”和“str”