Fatal编程技术网
  • ag-grid/
  • Ag grid 如何使用带ag网格的布尔数据复选框

Ag grid 如何使用带ag网格的布尔数据复选框

ag-grid

Ag grid 如何使用带ag网格的布尔数据复选框,ag-grid,ag-grid-react,Ag Grid,Ag Grid React,我已经搜索了一段时间，还没有看到任何这样的实例 我使用的是ag grid react，我想要一个包含布尔值的列，用复选框表示该布尔值，并在更改时更新rowData中的对象 我知道有checkboxSelection，我试着像下面一样使用它，但意识到虽然它是一个复选框，但它没有链接到数据，只是用于选择单元格 var columnDefs = [ { headerName: 'Refunded', field: 'refunded', checkboxSelection: true,} ]

我已经搜索了一段时间，还没有看到任何这样的实例

我使用的是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' : ''} />`;
    }
}];

const columnDefs=[{headerName:'returned'，
字段：'已退款'，
是的，
cellRenderer:params=>{
返回``；
}
}];
我也遇到了同样的问题，这是我能想到的最好的方法，但我无法将值绑定到此复选框

我将单元格属性“可编辑”设置为true，现在如果要更改实际值，必须双击单元格并键入true或false

但这就是我所做的，我决定帮助你们，我知道这并不能100%解决所有问题，但至少它解决了数据表示部分

如果您发现了如何与我们分享您的答案。

因此，最终我多少得到了我想要的，但以稍微不同的方式，我使用了popupSelect和cellEditorParams，其值为：[“真”、“假”。当然，我并没有一个我想要的实际复选框，但它的表现足以满足我的需要

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

function RefundedCellRenderer(params) {
    return params.value;
}
在columnDefs中，添加复选框列。不需要将“单元格”属性“可编辑”设置为true

columnDefs：[
{headerName:''，字段：'checkbox'，CellRenderFramework:CheckboxRenderer，宽度：30}，
…]

复选框渲染器

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

导出类checkbox.Component{
建造师（道具）{
超级（道具）；
这个州={
价值：道具价值
};
this.handleCheckboxChange=this.handleCheckboxChange.bind（this）；
}
HandleCheckBox更改（事件）{
this.props.data.checkbox=！this.props.data.checkbox；
this.setState（{value:this.props.data.checkbox}）；
}
render（）{
报税表（
);
}
}
这个怎么样？它在角度上，而不是在反应上，但你可以得到要点：

{
headerName:“已启用”，
字段：“已启用”，
CellRenderFramework:CheckboxCellComponent
},
下面是checkboxCellComponent：

import React from "react";

class AgGridCheckbox extends React.Component {

  state = {isChecked: false};

  componentDidMount() {
    let boolValue = this.props.value.toString() === "true";
    this.setState({isChecked: boolValue});
  }

  onChanged = () => {
    const checked = !this.state.isChecked;
    this.setState({isChecked: checked});
    this.props.setValue(checked);
  };

  render() {
    return (
      <div>
        <input type={"checkbox"} checked={this.state.isChecked} onChange={this.onChanged}/>
      </div>
    );
  }
}

export default AgGridCheckbox;

@组件({
选择器：“复选框单元格”，
模板：``，
样式URL:['./checkbox cell.component.css']
})
导出类CheckboxCellComponent在ViewInit、ICellRenderAngularComp之后实现{
@ViewChild（'.checkbox'）复选框：ElementRef；
公共参数：IcellRenderParams；
构造函数（）{}
agInit（参数：IcellRenderParams）：无效{
this.params=params；
}
公共变更（事件）{
this.params.data[this.params.colDef.field]=event.currentTarget.checked；
}
}
让我知道

字符串值数组对我不起作用，但[true，false]数组起作用

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

function RefundedCellRenderer(params) {
    return params.value;
}
下面的代码有助于解决这个问题。缺点是gridOptions中的正常事件不会触发（onCellEditingStarted、onCellEditingStopped、onCellValueChanged等）

import React，{Component}来自'React'；
导出类CheckboxRenderer扩展组件{
建造师（道具）{
超级（道具）；
if（this.props.colDef.field==='noRestrictions'）{
此.state={
价值观：正确，
禁用：false
};
}
else if（this.props.colDef.field==='doNotBuy'）{
此.state={
值：false，
禁用：真
};
}
this.handleCheckboxChange=this.handleCheckboxChange.bind（this）；
}
HandleCheckBox更改（事件）{
//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}）；}
警报（this.state.value）；
//检查最后一行和columnname，并启用其他列
}
render（）{
返回(
);
}
}
导出默认CheckboxRenderer；
从“React”导入React，{Component}；
导入“/App.css”；
从'ag grid react'导入{AgGridReact}；
从“/CheckboxRenderer”导入CheckboxRenderer；
导入'ag-grid/dist/styles/ag-grid.css'；
导入'ag-grid/dist/style/ag-theme-balham.css'；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
让enableOtherFields=false；
此.state={
columnDefs：[
{headerName:'Make'，field:'Make'}，
{
标题名称：“无限制”，字段：“无限制”，
CellRenderFramework:CheckboxRenderer，
CellRenderParams:{checkedVal:true，disable:false}，
onCellClicked:函数（事件）{
//event.node.columnApi.columnController.gridColumns[1]。colDef.CellRenderParams.checkedVal=！event.node.columnApi.columnController.gridColumns[1]。colDef.CellRenderParams.checkedVal；
//event.node.data.checkbox=！event.data.checkbox；
让currentNode=event.node.id；
event.api.forEachNode（（节点）=>{
if（node.id==currentNode）{
node.data.checkbox=！node.data.checkbox；
}
//如果（！node.columnApi.columnController.gridColumns[1].colDef.CellRenderParams.checkedVal）{//复选框未选中
if（node.data.checkbox==false&&node.data.checkbox！=='undefined'）{
enableOtherFields=true；
}否则{
enableOtherFields=false；
}
//警报（node.id）；
//警报（event.colDef.cellRenderParams.checkedVal）；
})；警报（“启用其他字段：+enableOtherFields”）；
}
},

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;



    function booleanCellRenderer(params) { 
        var valueCleaned = params.value;
        if (valueCleaned === 'T') {
            return '<input type="checkbox" checked/>';
        } else if (valueCleaned === 'F') {
            return '<input type="checkbox" unchecked/>';
        } else if (params.value !== null && params.value !== undefined) {
            return params.value.toString();
        } else {
            return null;
        }
    }

    var gridOptions = { 
        ...
        components: {
            booleanCellRenderer: booleanCellRenderer,
        }
    };

    gridOptions.api.setColumnDefs(
      colDefs.concat(JSON.parse('[{"headerName":"Name","field":"Field", 
        "cellRenderer": "booleanCellRenderer"}]')));



{
    headerName: "display name",
    field: "fieldName",
    cellRenderer: function(params) { 
        var input = document.createElement('input');
        input.type="checkbox";
        input.checked=params.value;
        input.addEventListener('click', function (event) {
            params.value=!params.value;
            params.node.data.fieldName = params.value;
        });
        return input;
    }
}



var columnDefs = [
  {
    headerName: 'Refunded', 
    field: 'refunded',
    editable: true,
    cellEditor: 'booleanEditor',
    cellRenderer: booleanCellRenderer
  },
];



function getBooleanEditor() {
    // function to act as a class
    function BooleanEditor() {}

    // gets called once before the renderer is used
    BooleanEditor.prototype.init = function(params) {
        // create the cell
        var value = params.value;

        this.eInput = document.createElement('input');
        this.eInput.type = 'checkbox'; 
        this.eInput.checked = value;
        this.eInput.value = value;
    };

    // gets called once when grid ready to insert the element
    BooleanEditor.prototype.getGui = function() {
        return this.eInput;
    };

    // focus and select can be done after the gui is attached
    BooleanEditor.prototype.afterGuiAttached = function() {
        this.eInput.focus();
        this.eInput.select();
    };

    // returns the new value after editing
    BooleanEditor.prototype.getValue = function() {
        return this.eInput.checked;
    };

    // any cleanup we need to be done here
    BooleanEditor.prototype.destroy = function() {
        // but this example is simple, no cleanup, we could
        // even leave this method out as it's optional
    };

    // if true, then this editor will appear in a popup
    BooleanEditor.prototype.isPopup = function() {
        // and we could leave this method out also, false is the default
        return false;
    };

    return BooleanEditor;
}



function booleanCellRenderer(params) {
    var value = params.value ? 'checked' : 'unchecked';

    return '<input disabled type="checkbox" '+ value +'/>';
}



var gridOptions = {
    columnDefs: columnDefs,
    pagination: true,
    defaultColDef: {
        filter: true,
        resizable: true,
    },
    onGridReady: function(params) {
        params.api.sizeColumnsToFit();
    },
    onCellValueChanged: function(event) {
        if (event.newValue != event.oldValue) { 
            // do stuff
            // such hit your API update
            event.data.refunded = event.newValue; // Update value of field refunded
        }
    },
    components:{
        booleanCellRenderer: booleanCellRenderer,
        booleanEditor: getBooleanEditor()
    }
};



document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    // create the grid passing in the div to use together with the columns & data we want to use
    new agGrid.Grid(gridDiv, gridOptions);

    fetch('$urlGetData').then(function(response) {
        return response.json();
    }).then(function(data) {
        gridOptions.api.setRowData(data);
    })
});



import React from "react";

class AgGridCheckbox extends React.Component {

  state = {isChecked: false};

  componentDidMount() {
    let boolValue = this.props.value.toString() === "true";
    this.setState({isChecked: boolValue});
  }

  onChanged = () => {
    const checked = !this.state.isChecked;
    this.setState({isChecked: checked});
    this.props.setValue(checked);
  };

  render() {
    return (
      <div>
        <input type={"checkbox"} checked={this.state.isChecked} onChange={this.onChanged}/>
      </div>
    );
  }
}

export default AgGridCheckbox;



{
  headerName: "yourHeaderName",
  field: "yourPropertyNameInsideDataObject",
  cellRendererFramework: AgGridCheckbox
}



<div
    className="ag-theme-balham"
  >
    <AgGridReact
      defaultColDef={defaultColDefs}
      columnDefs={columnDefs}
      rowData={data}
    />
</div>



function AgGridCheckbox (props) {
  const boolValue = props.value && props.value.toString() === 'true';
  const [isChecked, setIsChecked] = useState(boolValue);
  const onChanged = () => {
    props.setValue(!isChecked);
    setIsChecked(!isChecked);
  };
  return (
    <div>
      <input type="checkbox" checked={isChecked} onChange={onChanged} />
    </div>
  );
}



{
  headerName: 'My Boolean Field',
  field: 'BOOLFIELD',
  cellRendererFramework: AgGridCheckbox,
  editable: true,
},



import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams } from 'ag-grid-community';

@Component({
    selector: 'checkbox-cell',
    template: `<input type="checkbox" [checked]="params.value" (change)="onChange($event)">`
})
export class CheckboxCellRenderer implements ICellRendererAngularComp {

    public params: ICellRendererParams; 

    constructor() { }

    agInit(params: ICellRendererParams): void {
        this.params = params;
    }

    public onChange(event) {
        this.params.data[this.params.colDef.field] = event.currentTarget.checked;
    }

    refresh(params: ICellRendererParams): boolean {
        return true;
    }
}



import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer';
. . .
@NgModule({
  declarations: [
    AppComponent,
    CheckboxCellRenderer
  ],
  imports: [
    BrowserModule,
    AgGridModule.withComponents([CheckboxCellRenderer])
  ],
  providers: [],
  bootstrap: [AppComponent]
})



import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer';



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    @ViewChild('exampleGrid', {static: false}) agGrid: AgGridAngular;

    columnDefs = [
        { headerName: 'Last name', field: 'lastName', editable: true },
        { headerName: 'First name', field: 'firstName',  editable: true },
        { headerName: 'Subscribed', field: 'subscribed', cellRenderer: 'checkboxCellRenderer' },
        { headerName: 'Is overweight', field: 'overweight', cellRenderer: 'checkboxCellRenderer' }
    ];
    frameworkComponents = {
      checkboxCellRenderer: CheckboxCellRenderer
    }
}



<ag-grid-angular #exampleGrid 
    style="height: 400px;" 
    class="ag-theme-material" 
    [rowData]="rowData"
    [columnDefs]="columnDefs" 
    [frameworkComponents]="frameworkComponents" >
</ag-grid-angular>



gridOptions = {
  onSelectionChanged: (event: any) => {
    let rowData = [];
    event.api.getSelectedNodes().forEach(node => {
      rowDate = [...rowData, node.data];
    });
    console.log(rowData);
  }
}



export default class extends Component {
  constructor(props) {
    super(props);
    this.checkedHandler = this.checkedHandler.bind(this);
  }
  checkedHandler() {
    let checked = event.target.checked;
    let colId = this.props.column.colId;
    this.props.node.setDataValue(colId, checked);
  }
  render() {
    return (
      <input 
        type="checkbox" 
        onClick={this.checkedHandler}
        checked={this.props.value}
      />
    )
  }
}



// ./index.jsx

 this.frameworkComponents = {
   checkboxRenderer: CheckboxCellRenderer,
 };

 this.state = {
      columnDefs: [
        // ...
        {
          headerName: 'Registered - Checkbox',
          field: 'registered',
          cellRenderer: 'checkboxRenderer',
        },
        // ...
      ]
      // ....



function CheckboxRenderer() {}

CheckboxRenderer.prototype.init = function(params) {
  this.params = params;

  this.eGui = document.createElement('input');
  this.eGui.type = 'checkbox';
  this.eGui.checked = params.value;

  this.checkedHandler = this.checkedHandler.bind(this);
  this.eGui.addEventListener('click', this.checkedHandler);
}

CheckboxRenderer.prototype.checkedHandler = function(e) {
  let checked = e.target.checked;
  let colId = this.params.column.colId;
  this.params.node.setDataValue(colId, checked);
}

CheckboxRenderer.prototype.getGui = function(params) {
  return this.eGui;
}

CheckboxRenderer.prototype.destroy = function(params) {
  this.eGui.removeEventListener('click', this.checkedHandler);
}



gridOptions.components = {
  checkboxRenderer: CheckboxRenderer
}



gridOptions.columnDefs = [
  // ...
  { 
    headerName: 'Registered - Checkbox',
    field: 'registered',
    cellRenderer: 'checkboxRenderer',
  },
  // ...



import React, {useEffect, forwardRef, useImperativeHandle, useRef, useState} from "react";

export default forwardRef((props, ref) => {
    const [value, setValue] = useState();

    if (value !== ! props.value) {
        setValue(!props.value);
    }

    const inputRef = useRef();
    useImperativeHandle(ref, () => {
        return {
            getValue: () => {
                return value;
            }
        };
    });

    const onChange= e => {
        setValue(!value);
    }

    return (<div  style={{paddingLeft: "15px"}}><input type="checkbox" ref={inputRef} defaultChecked={value} onChange={onChange}  /></div>);
})



       cellRenderer: params => {
            return `<i class="fa fa-${params.value?"check-":""}square-o" aria-hidden="true"></i>`;
        },



headerName: 'header name',
field: 'field',
filter: 'agTextColumnFilter',
cellRenderer: params => this.checkBoxCellEditRenderer(params),



checkBoxCellEditRenderer(params) {
   const input = document.createElement('input');
   input.type = 'checkbox';
   input.checked = params.value;
   input.addEventListener('click', () => {
      params.value = !params.value;
      params.node.data[params.coldDef.field] = params.value;
      // you can add here code

    });
      return input;
}