行详细信息视图和 checkboxSelector 选项的组合在有角度的光滑网格中产生奇怪的行为

如何解决行详细信息视图和 checkboxSelector 选项的组合在有角度的光滑网格中产生奇怪的行为

我已经创建了带有复选框的行详细信息视图的光滑网格。它在行展开操作上运行良好。但是当我展开行并单击网格中的复选框时，行详细信息视图不可见

预期行为：

当行展开到详细视图并在网格中单击复选框时，详细视图应该仍然相同

这里我附上了示例截图

展开行细节时

点击复选框时动作

Ts 代码示例：

export class GridRowDetail implements OnInit {

  angularGrid: AngularGridInstance;
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset: any[];
  detailViewRowCount = 9;
  message: string;


  constructor() { }

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
  }

  get rowDetailInstance(): any {

    return this.angularGrid.extensions.rowDetailView.instance || {};


  }

  ngOnInit(): void {
    this.defineGrid();
  }


  defineGrid() {


    this.columnDefinitions = [
      {
        id: 'customername',name: 'Customer Name',field: 'customername',minWidth: 190,cssClass: 'cell-title',sortable: true,queryFieldSorter: 'id',type: FieldType.string
      },{ id: 'orderamount',name: 'order Amount',field: 'orderamount',},{
          id: 'orderdate',name: 'Orderdate',field: 'orderdate',minWidth: 160,type: FieldType.dateIso,formatter: Formatters.dateIso,}
    ];


    this.gridOptions = {
      autoResize: {
        containerId: 'demo-container',sidePadding: 10
      },enableFiltering: true,enableRowDetailView: true,rowSelectionOptions: {
        selectActiveRow: true
      },rowMoveManager: {
        onBeforeMoveRows: (e,args) => this.onBeforeMoveRows(e,args),onMoveRows: (e,args) => this.onMoveRows(e,enableCheckboxSelector: true,enableRowSelection: true,checkboxSelector: {
        hideInFilterHeaderRow: false,multiSelect: false,datasetIdPropertyName: 'id',rowDetailView: {
        process: (item) => this.makeRowData(item),loadOnce: true,singleRowExpand: false,useRowClick: false,panelRows: 7,viewComponent: RowDetailView
      }
    };

    this.getData();
  }

  childColumnDefinitions = [


    {
     id: 'productname',name: 'Product Name',field: 'productname',width: 220,filterable: true,type: FieldType.string

   },{ id: 'price',name: 'Price',field: 'price',minWidth: 90,filterable: true },{ id: 'quantity',name: 'Quantity',field: 'quantity',filterable: true }
];

  getData() {

    this. dataset = [
     
      {

       id: 'id_d4',customername: "customer3",orderamount: "5300",orderdate: "dec15",'childs':[]
      },{

         id: 'id_d6',customername: "customer5",orderamount: "5030",'childs':[],{


        id: 'id_1d2',customername: "customer11",orderamount: "500",{


        id: 'id_1d5',customername: "customer14",orderamount: "300",{


        id: 'id_1d6',customername: "customer15",{


        id: 'id_11d2',customername: "customer16",{


        id: 'id_11d3',orderamount: "5000",{


        id: 'id_11d4',customername: "customer25",{


        id: 'id_d210',];
  }

  changeDetailViewRowCount() {
    if (this.angularGrid && this.angularGrid.extensionService) {
      const options = this.rowDetailInstance.getOptions();
      if (options && options.panelRows) {
        options.panelRows = this.detailViewRowCount; // change number of rows dynamically
        this.rowDetailInstance.setOptions(options);
      }
    }
  }

  closeAllRowDetail() {
    if (this.angularGrid && this.angularGrid.extensionService) {
      this.rowDetailInstance.collapseAll();
    }
  }

 makeRowData(item: any) {

    const itemDetail = item;
    itemDetail.id = itemDetail.id
    itemDetail.dataSet=itemDetail.childs;
    itemDetail.columnDefinition=this.childColumnDefinitions;
    return itemDetail

  }


  onGridItemClick(event)
  {
    console.log("event",event);
}

  onBeforeMoveRows(e,data){

   this. collapseAll();
    for (let i = 0; i < data.rows.length; i++) {
      // no point in moving before or after itself
      if (data.rows[i] === data.insertBefore || data.rows[i] === data.insertBefore - 1) {
        e.stopPropagation();
        return false;
      }
    }
    return true;
  }
  collapseAll() {
    var rowDetail = this.angularGrid.extensionService.getSlickgridAddonInstance(
      ExtensionName.rowDetailView
    );
    rowDetail.collapseAll();
  }
  onMoveRows(e,args) {
    const extractedRows = [];
    let left;
    let right;
    const rows = args.rows;
    const insertBefore = args.insertBefore;
    left = this.dataset.slice(0,insertBefore);
    right = this.dataset.slice(insertBefore,this.dataset.length);
    rows.sort((a,b) => {
      return a - b;
    });

    for (let i = 0; i < rows.length; i++) {
      extractedRows.push(this.dataset[rows[i]]);
    }

    rows.reverse();

    for (let i = 0; i < rows.length; i++) {
      const row = rows[i];
      if (row < insertBefore) {
        left.splice(row,1);
      } else {
        right.splice(row - insertBefore,1);
      }
    }
    this.dataset = left.concat(extractedRows.concat(right));
    const selectedRows = [];

    for (let i = 0; i < rows.length; i++) {
      selectedRows.push(left.length + i);
    }

    this.angularGrid.slickGrid.resetActiveCell();
    this.angularGrid.slickGrid.setData(this.dataset);
    this.angularGrid.slickGrid.setSelectedRows(selectedRows);
    this.angularGrid.slickGrid.render();
  }



}

HTML 代码示例

<div class="container-fluid">
  <angular-slickgrid gridId="grid21" [columnDefinitions]="columnDefinitions"
  [gridOptions]="gridOptions"
    [dataset]="dataset"  (sgOnClick)="onGridItemClick($event)" (onAngularGridCreated)="angularGridReady($event)">
  </angular-slickgrid>
</div>

解决方法

这是一个错误，现已在 2.25.0 版本中修复，请参阅 Release Note

这个问题与这样一个事实有关，即当您选择一行时，它会使所有 SlickGrid 行（SlickGrid 使用的常用术语，基本上意味着所有行都需要重新渲染）无效，但是当发生这种情况时，我们也需要建议行详细信息扩展也重绘/重新呈现行详细信息内容。因此，lib 中的修复只是在通过 onSelectedRowsChanged 事件发生行选择时重新绘制所有行详细信息内容。

在打印屏幕上还有一个附注，您可能应该使用 columnIndexPosition 选项来准确地告诉您要放置每个图标的位置，这是几个月前添加的，并且所有带有图标的 SlickGrid 插件都支持它（ RowMove,RowDetail,RowSelection)，例如改变行细节图标的列位置可以进行如下操作

this.gridOptions = {
  rowDetailView: {
    // optionally change the column index position of the icon (defaults to 0)
    columnIndexPosition: 1,}
};