Ag-сетка флажок рендеринга на основе данных столбца? - PullRequest
Новая
       7

Ag-сетка флажок рендеринга на основе данных столбца?

0 голосов
/ 17 ноября 2018 
    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;

Я использую компонент реагировать с сеткой, и я хочу, чтобы вместо всех строк было поле ввода для статуса, ожидающего только, я использовал визуализацию ячейки, но она не работает,

Как отображать флажок только для статуса Pending, флажок не должен отображаться со статусом Paid.

Решение мне бы очень помогло,

Я прочитал все документы, но не могу их использовать, любой, пожалуйста, помогите мне в этом.

1 Ответ

0 голосов
/ 17 ноября 2018

Вы должны изменить свой checkBoxSelection, чтобы он был функцией вместо просто true / false.
Согласно документации -

colDef.checkboxSelection также может быть функцией, которая возвращает true / false - используйте это, если вы хотите, чтобы в некоторых строках были только флажки, но не другие 

                {
                    headerName: "Status",
                    field: "status",
                    checkboxSelection: function(params) {
                        return params.data.status === 'Pending'
                    },
                    width: 250
                },

Пример сетки Ag здесь

...