基于列数据的 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 复选框渲染?的主要内容,如果未能解决你的问题,请参考以下文章

列上下文菜单复选框在ag-grid中切换

如何将复选框放在组中,但在 ag-grid 的其他列中

列过滤器复选框未更新

ag-grid 中的动态列配置

在 Ag-grid 中禁用复选框选择

处理 ag grid react 并渲染复选框网格