基于列数据的 Ag-grid 复选框渲染?
Posted
技术标签:
【中文标题】基于列数据的 Ag-grid 复选框渲染?【英文标题】:Ag-grid checkbox render based on column data? 【发布时间】:2019-04-20 14:29:53 【问题描述】: 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 的复选框。
解决方案对我有很大帮助,
我已经阅读了所有文件,但我无法使用,请任何人指导我。
【问题讨论】:
你有没有看过创建自定义组件 - ag-grid.com/javascript-grid-cell-rendering-components/… 是的,我将渲染器用于其他事情,但对于基于列数据的复选框,我无法在特定列键数据上渲染(待定) 当你说复选框时,你是在暗示一个复选图标还是一个可以响应事件的复选框输入? 在 COLUMNDEF 中,我保持 checkboxSelection 为真,所以我进入了所有行 【参考方案1】:您应该将 checkBoxSelection
修改为一个函数,而不仅仅是 true/false。
根据文档 -
colDef.checkboxSelection 也可以是返回的函数 true/false - 如果您只想要某些行上的复选框而不想要复选框,请使用此选项 其他
headerName: "Status",
field: "status",
checkboxSelection: function(params)
return params.data.status === 'Pending'
,
width: 250
,
Ag网格示例here
【讨论】:
以上是关于基于列数据的 Ag-grid 复选框渲染?的主要内容,如果未能解决你的问题,请参考以下文章