如何在 Ag-Grid React.js 中设置默认检查？

Posted 2023-03-28

【中文标题】如何在 Ag-Grid React.js 中设置默认检查？

【英文标题】：How can I set default checked in Ag-Grid React.js?

【发布时间】：2022-01-06 22:29:07

【问题描述】：

我使用 react ag-grid，并且在行上有 checkboxSelection。我想默认检查一些行，而不是检查一些行。我该怎么做？

columnDefinationVoucherList: [
                 headerName: "", cellRenderer: countCellIndex, width: 50, minWidth: 40, maxWidth: 50, editable: false, ,
                 headerName: "Belge Kodu", field: "ApplicationVoucher.Voucher.VoucherCode", width: 50, minWidth: 50, maxWidth: 80, suppressSizeToFit: true, sortable: true ,
                 headerName: "Belge Adı", field: "ApplicationVoucher.Voucher.VoucherName", width: 120, minWidth: 50, suppressSizeToFit: true ,
                 headerName: "Seç", field: "", width: 90, minWidth: 10, suppressSizeToFit: true, maxWidth: 50, checkboxSelection: true, ,
            ],

                                          <AgGridReact
                                            columnDefs=this.state.columnDefinationVoucherList
                                            headerHeight=30
                                            rowHeight=20
                                            rowData=this.state.documentList
                                            onColumnResized=true
                                            enableCellChangeFlash=true
                                            enableCellTextSelection=true
                                            enableCellExpressions=true
                                            enableSorting=true
                                            enableFilter=true
                                            enableGroupEdit=true
                                            enableRangeHandle=true
                                            defaultColDef=this.state.shortGridDefaultColDef
                                            rowSelection='multiple'
                                            onSelectionChanged=this.GetSelectedVouchers
                                        >
                                        </AgGridReact>

我也使用企业模式。所以我对所有解决方案都持开放态度。

【参考方案1】：

我在这个网站的支持下解决了https://blog.ag-grid.com/binding-boolean-values-to-checkboxes-in-ag-grid/

import CheckboxRenderer from './CheckboxRenderer';
            columnDefinationVoucherList: [
                 headerName: "", cellRenderer: countCellIndex, width: 50, minWidth: 40, maxWidth: 50, editable: false, ,
                 headerName: "Belge Kodu", field: "ApplicationVoucher.Voucher.VoucherCode", width: 50, minWidth: 50, maxWidth: 80, suppressSizeToFit: true, sortable: true ,
                 headerName: "Belge Adı", field: "ApplicationVoucher.Voucher.VoucherName", width: 120, minWidth: 50, suppressSizeToFit: true ,
                 headerName: "Seç", field: "IsDocumentSelected", cellRenderer: "checkboxRenderer", width: 90, minWidth: 10, suppressSizeToFit: true, maxWidth: 50, editable: false ,
            ],
                                        <AgGridReact
                                            columnDefs=this.state.columnDefinationVoucherList
                                            headerHeight=30
                                            rowHeight=20
                                            rowData=this.state.documentList
                                            onColumnResized=true
                                            enableCellChangeFlash=true
                                            enableCellTextSelection=true
                                            enableCellExpressions=true
                                            enableSorting=true
                                            enableFilter=true
                                            enableGroupEdit=true
                                            enableRangeHandle=true
                                            defaultColDef=this.state.shortGridDefaultColDef
                                            rowSelection='multiple'
                                            onSelectionChanged=this.GetSelectedVouchers
                                            frameworkComponents= checkboxRenderer: CheckboxRenderer
                                        >
                                        </AgGridReact>

我还添加了一个新的 jsx 文件并导入我的 js 文件。

import React,  Component  from "react";

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