gpt4 book ai didi

javascript - 如何使用 ag-grid 中的复选框更改 bool 数据?

转载 作者:行者123 更新时间:2023-11-29 23:00:06 24 4
gpt4 key购买 nike

我正在使用一个复选框来显示 bool 数据(复选框将在“Y”的情况下被选中,而在“N”或(空)的情况下不会被选中)。当单元格/数据在网格中正确显示时,当我单击复选框时,我还希望更改单元格中的数据 - 不仅仅是复选框(换句话说,双向绑定(bind),但在 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),您必须双击单元格并自己手动更改单元格的值 - 才能更改单元格值。我希望复选框能够更改单元格值。

如有任何帮助/建议,我们将不胜感激!

最佳答案

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

工作 plunker:https://plnkr.co/edit/qMXxp2axYbeLwssAuueZ?p=preview

关于javascript - 如何使用 ag-grid 中的复选框更改 bool 数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55857473/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com