如何使用 ag-grid 中的复选框更改布尔数据？答案

【问题标题】：How to change boolean data with checkbox in ag-grid?如何使用 ag-grid 中的复选框更改布尔数据？
【发布时间】：2019-09-15 08:52:00
【问题描述】：

我正在使用一个复选框来显示布尔数据（复选框将在“Y”的情况下被选中，而在“N”或（null）的情况下不会被选中）。虽然单元格/数据在网格中正确显示，但当我单击复选框时，我还希望更改单元格中的数据 - 不仅仅是复选框（换句话说，双向绑定，但在 ag 网格中使用不是真/假的值 - 而是“Y”和“N”，并且选中/取消选中会更改单元格值本身）。

我目前正在使用 cellRenderer 根据单元格的数据显示复选框。

这是我定义网格的代码：

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();
});

很像这个工作的plunker，https://plnkr.co/edit/cV5wFLY4nnyQgVIcnGrF?p=preview

当然，您可以单击复选框，框内的复选框将消失，但这也不一定会更改单元格的值。在这两个示例中（我的代码和我提供的 plunker），您必须双击单元格并自己手动更改单元格的值 - 以便更改单元格值。我希望复选框能够更改单元格值。

任何帮助/建议将不胜感激！

【问题讨论】：

标签： javascript ag-grid

【解决方案1】：

Plunker 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;
}
}

工作人员：https://plnkr.co/edit/qMXxp2axYbeLwssAuueZ?p=preview

【讨论】：