J'ai cherché pendant un certain temps maintenant et n'ai vu aucun exemple réel de ceci.
J'utilise ag-grid-react et je souhaiterais qu'une colonne contenant un booléen représente ce booléen avec une case à cocher et mette à jour l'objet dans rowData lorsqu'il est modifié.
Je sais qu'il y a checkboxSelection et j'ai essayé de l'utiliser comme ce que j'ai ci-dessous, mais je me rends bien compte que si c'est une case à cocher, elle n'est pas liée aux données et sert simplement à sélectionner une cellule.
var columnDefs = [
{ headerName: 'Refunded', field: 'refunded', checkboxSelection: true,}
]
Y a-t-il un moyen de faire ce que je recherche avec ag-grid et ag-grid-react?
Vous devez utiliser la propriété cellRenderer
const columnDefs = [{ headerName: 'Refunded',
field: 'refunded',
editable:true,
cellRenderer: params => {
return `<input type='checkbox' ${params.value ? 'checked' : ''} />`;
}
}];
J'étais coincé dans le même problème, c'est le meilleur que j'ai pu trouver mais je n'ai pas pu lier la valeur à cette case à cocher.
J'ai défini la propriété de cellule editable sur true. Désormais, si vous souhaitez modifier la valeur réelle, vous devez double-cliquer sur la cellule et taper true ou false.
mais c’est tout ce que j’ai fait et j’ai décidé de vous aider, je sais que cela ne résout pas tout, mais au moins cela a résolu la partie présentation des données.
si vous avez découvert comment partager vos réponses avec nous.
Le code ci-dessous aide à résoudre le problème. L'inconvénient est que les événements normaux dans gridOptions ne seront pas déclenchés (onCellEditingStarted, onCellEditingStopped, onCellValueChanged, etc.).
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;
};
Et ça? C'est sur Angular et non sur React, mais vous pouvez comprendre le point:
{ headerName: 'Enabled', field: 'enabled', cellRendererFramework: CheckboxCellComponent },
Et voici la 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;
}
}
Faites le moi savoir
Le tableau des valeurs de chaîne ne fonctionne pas pour moi, mais le tableau de [true, false] fonctionne.
{
headerName: 'Refunded',
field: 'refunded',
cellEditor: 'popupSelect',
cellEditorParams: {
cellRenderer: RefundedCellRenderer,
values: [true, false]
}
},
function RefundedCellRenderer(params) {
return params.value;
}
import React, { Component } from 'react';
export class CheckboxRenderer extends Component{
constructor(props) {
super(props);
if(this.props.colDef.field==='noRestrictions'){
this.state={
value:true,
disable:false
};
}
else if(this.props.colDef.field==='doNotBuy')
{
this.state={
value:false,
disable:true
};
}
this.handleCheckboxChange=this.handleCheckboxChange.bind(this);
}
handleCheckboxChange(event) {
//this.props.data.checkbox=!this.props.data.checkbox; ={this.state.show}
//this.setState({value: this.props.data.checkbox});
if(this.state.value){this.setState({value: false});}
else{this.setState({value: true});}
alert(this.state.value);
//check for the last row and check for the columnname and enable the other columns
}
render() {
return (
<input type='checkbox' checked={this.state.value} disabled={this.state.disable} onChange={this.handleCheckboxChange}/>
);
}
}
export default CheckboxRenderer;
import React, { Component } from 'react';
import './App.css';
import { AgGridReact } from 'ag-grid-react';
import CheckboxRenderer from './CheckboxRenderer';
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/ag-theme-balham.css';
class App extends Component {
constructor(props) {
super(props);
let enableOtherFields=false;
this.state = {
columnDefs: [
{headerName: 'Make', field: 'make'},
{headerName: 'noRestrictions', field: 'noRestrictions',
cellRendererFramework: CheckboxRenderer,
cellRendererParams:{checkedVal:true,disable:false},
onCellClicked: function (event) {
// event.node.columnApi.columnController.gridColumns[1].colDef.cellRendererParams.checkedVal=!event.node.columnApi.columnController.gridColumns[1].colDef.cellRendererParams.checkedVal;
// event.node.data.checkbox=!event.data.checkbox;
let currentNode=event.node.id;
event.api.forEachNode((node) => {
if(node.id===currentNode)
{
node.data.checkbox=!node.data.checkbox;
}
//if(!node.columnApi.columnController.gridColumns[1].colDef.cellRendererParams.checkedVal){ // checkbox is unchecked
if(node.data.checkbox===false && node.data.checkbox!=='undefined'){
enableOtherFields=true;
}
else
{
enableOtherFields=false;
}
//alert(node.id);
//alert(event.colDef.cellRendererParams.checkedVal);
}); alert("enable other fields:"+enableOtherFields);
}
},
{headerName:'doNotBuy',field:'doNotBuy',
cellRendererFramework: CheckboxRenderer,
cellRendererParams:{checkedVal:false,disable:true}
},
{headerName: 'Price', field: 'price', editable: true}
],
rowData: [
{make: "Toyota",noRestrictions:true,doNotBuy:false, price: 35000},
{make: "Ford", noRestrictions:true,doNotBuy:false,price: 32000},
{make: "Porsche", noRestrictions:true,doNotBuy:false, price: 72000}
]
};
}
componentDidMount() {
}
render() {
return (
<div
className="ag-theme-balham"
style={{height: '200px', width: '800px'}}
>
<AgGridReact
enableSorting={true}
enableFilter={true}
//pagination={true}
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}>
</AgGridReact>
</div>
);
}
}
export default App;
Dans columnDefs, ajoutez une colonne à case à cocher. Il n'est pas nécessaire de définir la propriété de cellule editable sur true
columnDefs: [
{ headerName: '', field: 'checkbox', cellRendererFramework: CheckboxRenderer, width:30},
...]
Le 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>);
}
}