- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用一个复选框来显示 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/
我有一个带有列的表提供者 implied(tiny int)(something like nullable bool) provi
我正在阅读 VideoFileWriter来自 AForge.Video.FFMPEG 的类(class)通过 ILSPY 组装(我很想看看特定方法是如何工作的)并发现了这个: public bool
这是我的完整代码... import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import
我有一个输入 list类型 [Maybe SomeType]和一个谓词 p类型 SomeType -> Bool ,我想回答这个问题“谓词 p 是否适用于所有碰巧在输入中的 SomeType ?”。
使用 !!x 有什么区别吗?对比(bool)x ? 假设__STDC_VERSION__ >= 199901L和 #include 他们都保证结果是0吗?或 1 ,并且无论 x 的大小和值如何,都不
我正在编写一些 C++ 代码,我想调用两个函数(checkXDirty 和 checkYDirty),并返回 true如果任一返回 true。即使一个返回 true 我也需要评估两者,所以我的第一个想
我注意到 bool在 QtCreator 中以不同于其他类型的颜色突出显示: 只有在包含某些 header 时才会发生这种情况,最终我将其追踪到 . QtCreator 的代码检查器似乎无法手动跟踪
有一个函数: func (first: Int) -> Int -> Bool -> String { return ? } 返回值怎么写?我对上面 func 的返回类型感到很困惑。 最
训练神经网络学习“异或” 我正在尝试使用“批量归一化”,我创建了一个批量归一化层函数“batch_norm1”。 import tensorflow as tf import nump
我已经创建了任务函数来验证我的 json 文件。一切正常,直到我没有使用结果。当我试图从 async task function 获得结果时它显示错误为 Cannot implicitly conve
我有一个函数 func login (parameters: [(String, Any)], completion: @escaping (Bool) -> Vo
我正在处理最近从 X/Motif 转移到 Qt 的 C++ 代码库。我正在尝试编写一个 Perl 脚本,它将用 bool 替换所有出现的 Boolean(来自 X)。该脚本只是做了一个简单的替换。 s
嗨,我正尝试创建一个Visiblity小部件,如果用户在Firebase数据库阵列上,该小部件将显示。看起来像这样(成员数组): 如您所见,我创建了一个StreamBuilder,如果当前用户的用户名
我创建了如下的rest api方法, Future activateAccount(int id, int code) async{ final body = {"code": '$c
在我的Flutter应用中,我有一个返回Future的函数,但我想将结果作为Stream。这是函数: Future isGpsOn() async { if (await Geolocat
我可以看到 BOOLEAN 覆盖了 __visit_name__ class BOOLEAN(Boolean): __visit_name__ = 'BOOLEAN' 控制调度员选择的访问者方
考虑以下代码: bool x; bool? y = null; x = y?? true; 将 bool? 分配给 bool 是一个编译时错误,但上面的代码在编译和运行时都成功了。为什么?尽管第三条语
我正在重写一些 Javascript 代码以在 Excel VBA 中工作。由于在这个网站上搜索,我已经设法翻译了几乎所有的 Javascript 代码!但是,有些代码我无法准确理解它在做什么。这是一
我想拍一张bool来自Vec并在 if 语句中进行比较。如何解决以下错误? | 7 | if cell { | ^^^^ expected
我在我的应用程序崩溃跟踪工具中发现了一些崩溃。基本上我有一个 tabBarController,其中一个选项卡有一个嵌入式 UIWebView,另一个选项卡有一个带有 UITableView 的 Co
我是一名优秀的程序员,十分优秀!