web-dev-qa-db-fra.com

Comment utiliser une case à cocher pour une donnée booléenne avec ag-grid

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?

ag-gridag-grid-react
16
Brett

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.

16
Willy

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

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

6
user2010955

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;
}
0
Juraj Sarissky
    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;
0
Mousumi Choudhury

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>);
    }
}
0
CS-