Question

我正在将Ag-grid用于React，并启用了多行选择。当您单击一行并按住Shift键并单击得更远时，介于两者之间的所有行都会按照您的期望进行选择。

但是我将主从设计与ag-grid一起使用，其中每行下面都有一个明细行/网格。网格可以在两种模式下运行，即展开明细行或隐藏明细行。

当隐藏它们时，shift-select可以正常工作。显示它们时，如果在第二行的MAIN主行区域上进行Shift-Select，则shift-Select起作用，并且仅选择两行之间的行。

但是，如果您移动选择并单击第二行的DETAIL（详细信息）区域，则网格会突然选择所有内容，直到网格结束。

我已经截获了selectionChanged事件，到那时似乎已经选择了数百行，即使应该只有几行，所以我想知道这是否是一个错误？

很难提供代码，因为有很多东西可以构建所有的应用程序，但是我会发表我认为可以做的事情。

<AgGridReact 
            gridOptions={this.props.gridOptions} 
            rowData={this.props.trades}
            onGridReady={this.onGridReady}    
            onSelectionChanged={this.selectionChanged}
            onModelUpdated={this.initGridSize}
          />

网格选项

export const gridOptions: any = {
    animateRows: false,
    columnDefs: [... (abbreviated)],
    deltaRowDataMode: true,
    detailCellRenderer: "detailCellRenderer",
    enableColResize: true,
    enableFilter: true,
    enableSorting: true,
    getRowHeight: (params:any) => {
      const isDetailRow = params.node.detail;
      if (isDetailRow) {
          return 25;
      } else {
          return 35;
      }
    },
    getRowNodeId: (data:TradeEntity) => {
      return data.EntryId.toString();
    },
    getRowStyle: (params:any) => {
      if (params.node.selected) {return {background: '#4A708B'}};

      const rowData = params.node.data;

        if (params.node.group) {
          return {background: '#222'};
        }

        if (params.node.detail) {
          if (params.node.parent.selected){return {background: '#4A708B'}};
          if (rowData.FeedSource && rowData.FeedSource !== "") {
            return params.node.parent.childIndex%2 === 1 ? {background: '#168' } : {background: '#146' }
          }

          return params.node.parent.childIndex%2 === 1 ? {background: '#444' } : {background: '#333' };  
        }

        if (rowData.FeedSource && rowData.FeedSource !== "") {
          return params.node.childIndex%2 === 1 ? {background: '#168' } : {background: '#146' }
        }

        return params.node.childIndex%2 === 1 ? {background: '#444' } : {background: '#333' };
    },

    groupDefaultExpanded: 1,
    groupUseEntireRow: true,
    masterDetail: true,
    rememberGroupStateWhenNewData: true,
    rowHeight: 35,
    rowSelection: "multiple",
    suppressColumnVirtualisation: true,
    suppressRowClickSelection: false
  };

详细信息渲染器

import "ag-grid-enterprise";
import * as React from 'react';
import TradeEntity from "../../../model/tradeEntity";
import { formatRiskDate, formatRiskNumber } from "../../../utils/tradeUtils";

interface IRiskDetailCellRendererProps {
    reactContainer: any,
    node: any
}

        export default class DetailCellRenderer extends React.Component<IDetailCellRendererProps, {}> {
        constructor(props:any) {
            super(props);
        }

        public render() {
            const p = this.props as any;
            const data = p.node.data as MyEntity;
            if (!data || !data.ViewingData) { return '';}
            const rData = data.ViewingData;
            const headerClass = (p.node.selected || p.node.parent.selected) ? 'MeasureHeaderSelected' : 'MeasureHeader';
            return (
                <div className="DetailRow">
                    <div className={headerClass}>
    ... abbreviated
                    </div>
                </div>
            );
        }
    }

最后，选择更改了处理程序，通过查看gridApi作为选定节点返回什么，我看到整个网格已被选中

 private selectionChanged(params: any) {
    let selectedNodes = this.gridApi.getSelectedNodes();

}

在带有详细信息行的农业网格上进行Shift-select不能按预期工作

0 个答案: