web-dev-qa-db-ja.com

ag-gridでブールデータのチェックボックスを使用する方法

私は今しばらく検索しましたが、実際の例は見ていません。

私はag-grid-reactを使用していますが、ブール値を保持する列にチェックボックスでそのブール値を表し、変更されたときにrowDataのオブジェクトを更新したいと思います。

私は、checkboxSelectionがあることを知っており、以下のように使用してみましたが、チェックボックスであるにもかかわらず、データにリンクされておらず、セルを選択するためだけのものであることに気付きました。

var columnDefs = [
        { headerName: 'Refunded', field: 'refunded', checkboxSelection: true,}
  ]

それで、ag-gridとag-grid-reactで私が探していることをする方法はありますか？

ag-gridag-grid-react
16
Brett

CellRendererプロパティを使用する必要があります

const columnDefs = [{ headerName: 'Refunded', 
    field: 'refunded', 
    editable:true,
    cellRenderer: params => {
        return `<input type='checkbox' ${params.value ? 'checked' : ''} />`;
    }
}];

私は同じ問題で立ち往生しました、これは私が思いつくことができる最高のものですが、私はこのチェックボックスに値をバインドすることができませんでした。

セルプロパティeditableをtrueに設定します。実際の値を変更する場合は、セルをダブルクリックしてtrueまたはfalseを入力する必要があります。

しかし、これは私が行った限りであり、私はあなたを助けることにした、私はそれがすべてを100％解決するわけではないことを知っているが、少なくともそれはデータ提示の部分を解決した。

答えを共有してください。

16
Willy

以下のコードは問題の解決に役立ちます。欠点は、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;
  };
7
Will

これはどうですか？ 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;
  }
}

お知らせ下さい

6
user2010955

文字列値の配列は機能しませんが、[true、false]の配列は機能します。

{
    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

ColumnDefsで、チェックボックス列を追加します。セルプロパティeditableを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>);
    }
}
0
CS-