ag-gridのブール値データのチェックボックスの使用方法

Question

私はしばらく検索しましたが、実際の例はありませんでした。

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

私はcheckboxSelectionがあることを知っていますが、私は以下のように使ってみましたが、チェックボックスの間に認識されました。データにリンクされておらず、セルを選択するだけです。

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

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

Answer 1

最終的には私がやりたいことを幾分得ましたが、少し異なる方法で、popupSelectとcellEditorParamsを値[[true]、[false]]で使用しました。もちろん、私が望んでいたように私は、実際のチェックボックスを持っていないが、それは私がcolumnDefsで

{ 
    headerName: 'Refunded', 
    field: 'refunded', 
    cellEditor: 'popupSelect', 
    cellEditorParams: { 
     cellRenderer: RefundedCellRenderer, 
     values: ['true', 'false'] 
    } 
}, 

function RefundedCellRenderer(params) { 
    return params.value; 
} 

Answer 2

あなたはのcellRendererプロパティ

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

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

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

これは私が行った限りであり、私はあなたを助けることに決めました。それは100％解決していませんが、少なくともデータプレゼンテーションの部分を解決しました。

あなたが私たちとあなたの答えをどうやって共有しているか分かりましたか？

Answer 3

を必要とするものには十分に動作し、チェックボックスの列を追加します。真

この程度

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

Answer 4

何に編集可能なセルのプロパティを設定する必要はありませんか。それは角度でだと上で反応していないが、あなたはポイントを得ることができます：

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

私はdoesnの文字列値」の配列

Answer 5

を教えてください私のために働くが、[真実、偽り]の配列が働いている。

{ 
    headerName: 'Refunded', 
    field: 'refunded', 
    cellEditor: 'popupSelect', 
    cellEditorParams: { 
     cellRenderer: RefundedCellRenderer, 
     values: [true, false] 
    } 
}, 

function RefundedCellRenderer(params) { 
    return params.value; 
} 

Answer 6

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