我现在已经搜索了一段时间，但没有看到任何真实的例子。
我正在使用ag-grid-react，我想要一个包含布尔值的列来表示带有复选框的布尔值，并在更改时更新rowData中的对象。
我知道有checkboxSelection，我试着像我下面的那样使用它，但是虽然它是一个复选框，它没有链接到数据，只是用于选择单元格。
var columnDefs = [
{ headerName: 'Refunded', field: 'refunded', checkboxSelection: true,}
]
那么有没有办法用ag-grid和ag-grid-react做我正在寻找的东西？
您应该使用cellRenderer属性
const columnDefs = [{ headerName: 'Refunded',
field: 'refunded',
editable:true,
cellRenderer: params => {
return `<input type='checkbox' ${params.value ? 'checked' : ''} />`;
}
}];
我遇到了同样的问题，这是我能想到的最好的但是我无法将值绑定到此复选框。
我将cell属性editable设置为true，现在如果要更改实际值，则必须双击单元格并键入true或false。
但这就是我去了，我决定帮助你，我知道它不是100％解决所有问题，但至少它解决了数据显示部分。
如果你发现了如何请与我们分享你的答案。
以下代码有助于解决此问题。缺点是gridOptions中的正常事件不会被触发（onCellEditingStarted，onCellEditingStopped，onCellValueChanged等）。
var columnDefs = [...
{headerName: "Label", field: "field",editable: true,
cellRenderer: 'booleanCellRenderer',
cellEditor:'booleanEditor'
}
];
//register the components
$scope.gridOptions = {...
components:{
booleanCellRenderer:BooleanCellRenderer,
booleanEditor:BooleanEditor
}
};
function BooleanCellRenderer() {
}
BooleanCellRenderer.prototype.init = function (params) {
this.eGui = document.createElement('span');
if (params.value !== "" || params.value !== undefined || params.value !== null) {
var checkedStatus = params.value ? "checked":"";
var input = document.createElement('input');
input.type="checkbox";
input.checked=params.value;
input.addEventListener('click', function (event) {
params.value=!params.value;
//checked input value has changed, perform your update here
console.log("addEventListener params.value: "+ params.value);
});
this.eGui.innerHTML = '';
this.eGui.appendChild( input );
}
};
BooleanCellRenderer.prototype.getGui = function () {
return this.eGui;
};
function BooleanEditor() {
}
BooleanEditor.prototype.init = function (params) {
this.container = document.createElement('div');
this.value=params.value;
params.stopEditing();
};
BooleanEditor.prototype.getGui = function () {
return this.container;
};
BooleanEditor.prototype.afterGuiAttached = function () {
};
BooleanEditor.prototype.getValue = function () {
return this.value;
};
BooleanEditor.prototype.destroy = function () {
};
BooleanEditor.prototype.isPopup = function () {
return true;
};
那这个呢？它是在Angular而不是在React上，但你可以得到这一点：
{ headerName: 'Enabled', field: 'enabled', cellRendererFramework: CheckboxCellComponent },
这是checkboxCellComponent：
@Component({
selector: 'checkbox-cell',
template: `<input type="checkbox" [checked]="params.value" (change)="onChange($event)">`,
styleUrls: ['./checkbox-cell.component.css']
})
export class CheckboxCellComponent implements AfterViewInit,
ICellRendererAngularComp {
@ViewChild('.checkbox') checkbox: ElementRef;
public params: ICellRendererParams;
constructor() { }
agInit(params: ICellRendererParams): void {
this.params = params;
}
public onChange(event) {
this.params.data[this.params.colDef.field] = event.currentTarget.checked;
}
}
让我知道
在columnDefs中，添加一个复选框列。不需要将cell属性设置为true
columnDefs: [
{ headerName: '', field: 'checkbox', cellRendererFramework: CheckboxRenderer, width:30},
...]
CheckboxRenderer
export class CheckboxRenderer extends React.Component{
constructor(props) {
super(props);
this.state={
value:props.value
};
this.handleCheckboxChange=this.handleCheckboxChange.bind(this);
}
handleCheckboxChange(event) {
this.props.data.checkbox=!this.props.data.checkbox;
this.setState({value: this.props.data.checkbox});
}
render() {
return (
<Checkbox
checked={this.state.value}
onChange={this.handleCheckboxChange}></Checkbox>);
}
}
字符串值的数组对我不起作用，但是[true，false]的数组正在工作。
{
headerName: 'Refunded',
field: 'refunded',
cellEditor: 'popupSelect',
cellEditorParams: {
cellRenderer: RefundedCellRenderer,
values: [true, false]
}
},
function RefundedCellRenderer(params) {
return params.value;
}
所以最后我有点得到我想要的东西，但是以稍微不同的方式，我使用popupSelect和cellEditorParams的值：['true'，'false']。当然，我没有像我想要的那样的实际复选框，但它的行为足以满足我的需要
{
headerName: 'Refunded',
field: 'refunded',
cellEditor: 'popupSelect',
cellEditorParams: {
cellRenderer: RefundedCellRenderer,
values: ['true', 'false']
}
},
function RefundedCellRenderer(params) {
return params.value;
}