我想显示所有行、所有带有复选框的列,因为我只想要真/假值。但我想访问单个单元格值,即每个复选框都可以选中/取消选中。见下图。
据我所知,当我勾选复选框时,行的所有复选框都会被选中。那么,我可以选中/取消选中单个框吗?
{
headerName: 'Operator',
checkboxSelection: false,
headerCheckboxSelection: false,
filter: false,
sortable: false,
field: 'operator',
cellRenderer: function(params) {
let operatorValue = params.value;
const input = document.createElement('input');
input.type = 'checkbox';
if (operatorValue) {
input.checked = true;
params.data.operator = true;
} else {
input.checked = false;
params.data.operator = false;
}
input.addEventListener('click', function (event) {
input.checked != input.checked;
params.data.operator = input.checked;
});
return input;
}
}
希望这对演示和设置值有所帮助。
今天我也想知道它是如何工作的。我发现,最好的方法是创建一个新组件并使用
cellRendererFramework
而不是 cellRenderer
。
这是一个 StackBlitz 示例:
*更新了 Stackblitz 示例以展示如何更新底层模型!谢谢您的指点!
听起来您在每列中都使用
checkboxSelection
选项,这肯定会导致您所描述的行为。相反,您会想要使用 cellRenderer
,就像这个 plunker。
相关代码:
function checkboxCellRenderer (params){
var input = document.createElement("input")
input.type = "checkbox";
input.checked = params.value
console.log(input)
return input
}
只需在您的数据列中引用此函数即可:
{headerName: 'upload', field: 'e', cellRenderer: checkboxCellRenderer},
您可以使用布尔值(true 或 false)
我尝试了一下,成功了:
var columnDefs = [
{
headerName: 'Operator',
field: 'operator',
editable: true,
cellEditor: 'booleanEditor',
cellRenderer: booleanCellRenderer
},
];
功能复选框编辑器
function getBooleanEditor() {
// function to act as a class
function BooleanEditor() {}
// gets called once before the renderer is used
BooleanEditor.prototype.init = function(params) {
// create the cell
var value = params.value;
this.eInput = document.createElement('input');
this.eInput.type = 'checkbox';
this.eInput.checked = value;
this.eInput.value = value;
};
// gets called once when grid ready to insert the element
BooleanEditor.prototype.getGui = function() {
return this.eInput;
};
// focus and select can be done after the gui is attached
BooleanEditor.prototype.afterGuiAttached = function() {
this.eInput.focus();
this.eInput.select();
};
// returns the new value after editing
BooleanEditor.prototype.getValue = function() {
return this.eInput.checked;
};
// any cleanup we need to be done here
BooleanEditor.prototype.destroy = function() {
// but this example is simple, no cleanup, we could
// even leave this method out as it's optional
};
// if true, then this editor will appear in a popup
BooleanEditor.prototype.isPopup = function() {
// and we could leave this method out also, false is the default
return false;
};
return BooleanEditor;
}
然后是booleanCellRenderer函数
function booleanCellRenderer(params) {
var value = params.value ? 'checked' : 'unchecked';
return '<input disabled type="checkbox" '+ value +'/>';
}
让网格知道要使用哪些列和哪些数据
var gridOptions = {
columnDefs: columnDefs,
pagination: true,
defaultColDef: {
filter: true,
resizable: true,
},
onGridReady: function(params) {
params.api.sizeColumnsToFit();
},
onCellValueChanged: function(event) {
if (event.newValue != event.oldValue) {
// do stuff
// such hit your API update
event.data.operator = event.newValue; // Update value of field operator
}
},
components:{
booleanCellRenderer: booleanCellRenderer,
booleanEditor: getBooleanEditor()
}
};
页面加载完成后设置网格
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
// create the grid passing in the div to use together with the columns & data we want to use
new agGrid.Grid(gridDiv, gridOptions);
fetch('$urlGetData').then(function(response) {
return response.json();
}).then(function(data) {
gridOptions.api.setRowData(data);
})
});