Javascript 如何在ag网格中使用复选框更改布尔数据?
我正在使用一个复选框来显示布尔数据(在“Y”的情况下,复选框将被选中,而在“N”或(null)的情况下,复选框将不被选中)。当单元格/数据在网格中正确显示时,当我单击复选框时,我还希望更改单元格中的数据-不仅仅是复选框(换句话说,双向绑定,而是在ag网格中,值不是真/假-而是“Y”和“N”,并让选中/取消选中更改单元格本身的值) 我目前正在使用cellRenderer根据单元格的数据显示复选框 以下是我定义网格的代码:Javascript 如何在ag网格中使用复选框更改布尔数据?,javascript,ag-grid,Javascript,Ag Grid,我正在使用一个复选框来显示布尔数据(在“Y”的情况下,复选框将被选中,而在“N”或(null)的情况下,复选框将不被选中)。当单元格/数据在网格中正确显示时,当我单击复选框时,我还希望更改单元格中的数据-不仅仅是复选框(换句话说,双向绑定,而是在ag网格中,值不是真/假-而是“Y”和“N”,并让选中/取消选中更改单元格本身的值) 我目前正在使用cellRenderer根据单元格的数据显示复选框 以下是我定义网格的代码: var columnDefs = [ {headerName: 'n
var columnDefs = [
{headerName: 'name', field: 'a', editable: true, valueParser: numberValueParser},
{headerName: 'read', field: 'b', editable: true, cellRenderer: checkboxCellRenderer},
{headerName: 'write', field: 'c', editable: true, cellRenderer: checkboxCellRenderer},
{headerName: 'delete', field: 'd', cellRenderer: checkboxCellRenderer},
{headerName: 'upload', field: 'e', cellRenderer: checkboxCellRenderer},
];
function createRowData() {
var rowData = [];
for (var i = 0; i<20; i++) {
rowData.push({
a: Math.floor( ( (i + 323) * 25435) % 10000),
b: Math.floor( ( (i + 323) * 23221) % 10000)<5000,
c: Math.floor( ( (i + 323) * 468276) % 10000)<5000,
d: Math.floor( ( (i + 323) * 468276) % 10000)<5000,
e: Math.floor( ( (i + 323) * 468276) % 10000)<5000
});
}
return rowData;
}
function numberValueParser(params) {
return Number(params.newValue);
}
function formatNumber(number) {
// this puts commas into the number eg 1000 goes to 1,000,
// i pulled this from stack overflow, i have no idea how it works
return Math.floor(number).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
}
function checkboxCellRenderer (params){
var input = document.createElement("input")
input.type = "checkbox";
input.checked = params.value
return input
}
var gridOptions = {
defaultColDef: {
valueFormatter: function (params) {
return formatNumber(params.value);
},
cellClass: 'align-right'
},
columnDefs: columnDefs,
rowData: createRowData(),
enableColResize: true
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
gridOptions.api.sizeColumnsToFit();
});
var columnDefs=[
{headerName:'name',field:'a',editable:true,valueParser:numberValueParser},
{headerName:'read',字段:'b',可编辑:true,cellRenderer:checkboxCellRenderer},
{headerName:'write',字段:'c',可编辑:true,cellRenderer:checkboxCellRenderer},
{headerName:'delete',字段:'d',cellRenderer:checkboxCellRenderer},
{headerName:'upload',field:'e',cellRenderer:checkboxCellRenderer},
];
函数createRowData(){
var rowData=[];
对于(var i=0;iPlunker main.js checkboxCellRenderer函数修改:
function checkboxCellRenderer (params){
if(params.value !== 'Y' && params.value !== 'N'){
params.setValue(params.value === true || params.value === 'Y' ? 'Y' : 'N');
}else{
var input = document.createElement("input");
input.type = "checkbox";
input.value = params.value === true || params.value === 'Y' ? 'Y' : 'N';
input.checked = params.value === true || params.value === 'Y' ? true : false;
input.onclick = function(){
params.setValue(this.checked === true ? 'Y' : 'N');
}
return input;
}
}
工作冲击器: