在使用treeData属性的情况下,需要自定义复选框渲染器,以确保复选框的状态正确显示。具体操作如下:
定义自定义渲染器:
function CustomCheckboxRenderer() {}
CustomCheckboxRenderer.prototype.init = function(params) {
// create input element
this.eGui = document.createElement('div');
this.eGui.innerHTML = '';
this.eInput = this.eGui.querySelector('input');
this.value = params.value;
// set checked state based on value
if (params.value === true) {
this.eInput.checked = true;
} else if (params.value === false) {
this.eInput.checked = false;
}
// set indeterminate state
if (params.node.partiallyChecked) {
this.eInput.indeterminate = true;
}
// add change listener
var that = this;
this.eInput.addEventListener('change', function() {
that.value = this.checked;
params.node.setDataValue(params.colDef.field, that.value);
params.api.refreshRows([params.node]);
});
};
CustomCheckboxRenderer.prototype.getGui = function() {
return this.eGui;
};
CustomCheckboxRenderer.prototype.afterGuiAttached = function() {
this.eInput.focus();
};
CustomCheckboxRenderer.prototype.getValue = function() {
return this.value;
};
CustomCheckboxRenderer.prototype.isPopup = function() {
return false;
};
设置树形数据属性和复选框渲染器:
var gridOptions = {
columnDefs: [
{ field: 'name' },
{
field: 'checkbox',
cellRenderer: 'customCheckboxRenderer',
editable: true
}
],
defaultColDef: {
editable: true
},
treeData: true,
animateRows: true,
rowData: [
{
name: 'Row 1',
checkbox: false,
__children: [
{
name: 'Child 1-1',
checkbox: true,
__children: []
},
{
name: 'Child 1-2',
checkbox: false