[英]How can I set default checked in Ag-Grid React.js?
我使用反应 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>
我也使用企业模式。 所以我对每一个解决方案都持开放态度。
我在这个网站的支持下解决了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}
/>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.