aurelia slickgrid 中的多行选择和行视图详细信息

Question

这是我的网格定义和列定义。

defineGrid(): void {
    this.columnDefinitions = [
      {
        id: 'state',
        name: 'STATUS',
        field: 'state',
        sortable: true,
        type: FieldType.string,
        width: 50,
        filterable: true,
        cssClass: 'align-middle'
      },
      {
        id: 'customerName',
        name: 'customer Name',
        field: 'customerName',
        sortable: true,
        type: FieldType.string,
        width: 100,
        filterable: true,
        cssClass: 'align-middle'
      }
    ];

    this.gridOptions = {
      autoResize: {
        container: '#demo-container',
        rightPadding: 10
      },

      enableFiltering: true,
      enableAutoResize: true,
      enableRowDetailView: true,
      enableCellNavigation: true,
      enableCheckboxSelector: true,
      checkboxSelector: {
        // optionally change the column index position of the icon (defaults to 0)
        columnIndexPosition: 1,

        // you can toggle these 2 properties to show the "select all" checkbox in different location
        hideInFilterHeaderRow: false
        //hideInColumnTitleRow: true,
        //applySelectOnAllPages: true // when clicking "Select All", should we apply it to all pages (defaults to true)
      },
      enableRowSelection: true,
      rowSelectionOptions: {
        selectActiveRow: false
      },
      autoHeight: true,
      rowHeight: 58, // increase row height so that the custom elements fits in the cell,
      //alwaysShowVerticalScroll: false,
      datasetIdPropertyName: 'rowId', // optionally use a different "id"
      rowDetailView: {

        columnIndexPosition: 2,


        process: (item: any) => this.simulateServerAsyncCall(item),
        loadOnce: true,
        singleRowExpand: false,

        useRowClick: false, //true,

        panelRows: 9, //this.detailViewRowCount,

        // ViewModel Template to load when row detail data is ready
        viewModel: PLATFORM.moduleName('../hello-world/hello-world'),
        parent: this
      }
    };
  }

我可以获得带有复选框或 rowViewDetail 的多选行的 aurelia slickgrid 表，但不能同时获得两者。 aurelia slickgrid 有限制吗？ "aurelia-slickgrid": "^6.6.5" 与 aurelia 1。我试图同时获得多行选择和 rowDetailView。

Answer 1

我在 Aurelia-Slickgrid 的示例 19 中尝试了行选择和行详细信息视图，据我所知，它与下面所示的选项一起工作正常。这些设置没有什么特别之处，只是您需要确保禁用

useRowClick

，因为启用它会与行选择冲突，但除此之外，其他选项都是常规选项。

this.gridOptions = {
  enableRowDetailView: true,
  enableCheckboxSelector: true,
  enableRowSelection: true,
  rowSelectionOptions: {
    // True (Single Selection), False (Multiple Selections)
    selectActiveRow: false
  },
  checkboxSelector: {
    hideInFilterHeaderRow: false,
    hideSelectAllCheckbox: true,
  },
  rowDetailView: {
    // make sure to disable single row click to avoid conflict with Row Selection
    useRowClick: false,

    //...
  }
};

正如你在下面的 gif 动画中看到的，在启用两个插件的情况下，一切似乎都工作正常......实际上，我不确定为什么 Stack Overflow 不允许我今天上传 gif 动画，但你可以请参阅此 imgur 网站链接以获取该 gif

https://imgur.com/t3bsldS