[英]How to change boolean data with checkbox in ag-grid?
我正在使用復選框來顯示布爾數據(復選框將在“Y”的情況下被選中,在“N”或(空)的情況下不會被選中)。 當單元格/數據在網格中正確顯示時,當我單擊復選框時,我還希望更改單元格中的數據 - 不僅僅是復選框(換句話說,雙向綁定,而是在 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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.