[英]Ag-grid checkbox render based on column data?
import React, { Component } from 'react';
import ReactHighcharts from 'react-highcharts';
import axios from 'axios';
import { Link, browserHistory } from 'react-router';
import { AgGridReact, AgGridColumn } from "ag-grid-react";
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/ag-theme-material.css';
class Payments extends React.Component {
constructor(props) {
super(props);
this.state = {
rowSelection: "multiple",
columnDefs: [
{
headerName: "Paid For",
field: "paid_for",
width: 250
},
{
headerName: 'Amount',
field: 'amount',
width: 250
},
{
headerName: 'Payment Date',
field: 'payment_date',
width: 250
},
{
headerName: 'Reccurence',
field: 'recurrence_time',
width: 250
},
{
headerName: "Status",
field: "status",
checkboxSelection: true,
width: 250
},
],
paymentsrequest: [],
rowData: []
};
}
onGridReady(params) {
this.gridApi = params.api;
this.columnApi = params.columnApi;
this.gridApi.sizeColumnsToFit();
window.onresize = () => {
this.gridApi.sizeColumnsToFit();
}
}
onSelectionChanged() {
var selectedRows = this.gridApi.getSelectedRows();
let pendingpayments = selectedRows.filter(el => el.status == "Pending")
let paymentsrequest = [];
pendingpayments.forEach(function(selectedRow, index) {
let paymentslistobject = {
'payment_date': selectedRow["payment_date"],
'status': selectedRow["status"]
};
paymentsrequest.push(paymentslistobject);
});
this.setState({
paymentsrequest
});
}
render() {
return (
<AgGridReact
columnDefs={this.state.columnDefs}
rowSelection={this.state.rowSelection}
onGridReady={this.onGridReady.bind(this)}
groupSelectsChildren={true}
suppressRowClickSelection={true}
rowData={[{paid_for: 'Plan C + B', amount: '10000',payment_date: '2018-11-14',recurrence_time: 'Quarterly',status: 'Paid'}, {paid_for: 'Plan C + B', amount: '10000',payment_date: '2018-11-14',recurrence_time: 'Quarterly',status: 'Pending'}, {paid_for: 'Plan C + B', amount: '10000',payment_date: '2018-11-15',recurrence_time: 'Quarterly',status: 'Pending'}]}
onSelectionChanged={this.onSelectionChanged.bind(this)}>
</AgGridReact>
)
}
}
export default Payments;
我正在使用react ag-grid組件,並且我希望狀態單獨的輸入框而不是所有行都處於等待狀態,我使用了單元格渲染,但是它不起作用,
如何僅顯示狀態為Pending的復選框,不應顯示狀態為Paid的復選框。
解決方案可以幫助我很多,
我已經閱讀了所有文檔,但是我無法使用它,任何人都可以指導我。
您應該將checkBoxSelection
修改為一個函數,而不只是true / false。
根據文檔-
colDef.checkboxSelection也可以是返回true / false的函數-如果只需要某些行而不是其他行的復選框,請使用此功能
{
headerName: "Status",
field: "status",
checkboxSelection: function(params) {
return params.data.status === 'Pending'
},
width: 250
},
Ag網格示例在這里
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.