标签: ngx-datatable

我在ngx-datatable中为列添加多个支柱时遇到了一些问题:

columns = [
  { prop: 'semesterName', name: '?????', resizeable: false },
  { prop: 'eventName', name: '????', resizeable: false },
  { prop: 'when', name: '???? ????', resizeable: false },
  { prop: 'lecturerName', name: '????', resizeable: false },
  { prop: 'hugName', name: '???', resizeable: false },
];

我需要在一列中显示两个道具.就像一列中的'eventName'和'when'一样.

该模型:

export class Course {
  semester: string;
  semesterName: string;
  courseObject: string;
  course: string;
  courseName: string;
  eventObject: string;
  event: string;
  eventName: string;
  hugName: string;
  dayOfWeek: string;
  dayOfWeekNum: string;
  where: string;
  when: string;
  lecturerName: string; …

一些介绍:

我们目前正在开发一个基于Angular2的应用程序,它非常重要.为了显示这些数据,我们决定尝试使用ngx-datatables.需要大量组件来显示网格中的数据.我们添加了一个自定义页脚模板以及一种显示使用<select>元素的页面大小选择器的自定义标题.

标记行的数量增长了很多,因此我们希望将<ngx-datatable>带有页眉和页脚的定义移动到单独的网格组件中.现在,我们希望通过允许使用网格的开发人员简单地定义标记中的列来重用该组件,以便在列内容方面具有完全的灵活性.

我们的想法是拥有一个常用的网格组件,它只要求数据作为输入并呈现它.网格中的典型功能(服务器端排序和分页)应仅在网格组件中存在一次.使用网格组件的组件应该只提供网格组件所订阅的数据,就是这样.

我们现在所拥有的:

在.ts文件中定义的带有选择器'grid'的公共网格组件

<div class="gridheader">
    ... page size selector and other elements ...
</div>
<ngx-datatable
  class="material"
  [columnMode]="'force'"
  [rows]="data"
  [headerHeight]="'auto'"
  [footerHeight]="'auto'"
  [rowHeight]="'auto'"
  [externalPaging]="true"
  [externalSorting]="true"
  [count]="totalElements"
  [offset]="currentPageNumber"
  [limit]="pageSize"
  [loadingIndicator]="isLoading"
  (page)='loadPage($event)'
  (sort)="onSort($event)">

  <ng-content>
  </ng-content>

  <ngx-datatable-footer>
    <ng-template 
      ngx-datatable-footer-template 
      let-rowCount="rowCount"
      let-pageSize="pageSize"
      let-selectedCount="selectedCount"
      let-curPage="curPage"
      let-offset="offset">
      <div style="padding: 5px 10px">
        <div>
          <strong>Summary</strong>: Gender: Female
        </div>
        <hr style="width:100%" />
        <div>
          Rows: {{rowCount}} |
          Size: {{pageSize}} |
          Current: {{curPage}} |
          Offset: {{offset}}
        </div>
      </div>
    </ng-template>
  </ngx-datatable-footer>

</ngx-datatable>

具体网格

<grid (onFetchDataRequired)="fetchDataRequired($event)"> …

我在 ngx-datatable 中使用 row-detail 有两个问题。

1. rowIndex 不起作用。我发现了一个描述该问题的 github 问题，但据说它已在 v. 10.0.2 左右修复，我使用的是 11.1.5（当前版本）。{{rowIndex}} 的每一行都返回 0。我的解决方法是写出我自己的索引到一列，然后引用它，但我不应该这样做。使用下面的代码，当我单击其中的一行时，每一行都会进入编辑模式，因为它们都具有相同的 rowIndex。

2. 我无法让行详细信息行使用其“父”行的全宽。我怀疑这是因为我正在使用[columnMode]="'flex'"而演示使用 columnMode]="'force'"。我可以设置最小宽度，但我不能让 width: 100% 工作。可能是因为有一个没有宽度的 div 包装器

<ngx-datatable #dataTable class="material expandable" [rows]="rows" [limit]="50" [columnMode]="'flex'"
  [headerHeight]="50" [footerHeight]="50" [rowHeight]="50" [selectionType]="'single'" (select)="onSelect($event)"
  (activate)="onActivate($event)">
  <!-- Row Detail Template -->
  <ngx-datatable-row-detail [rowHeight]="50" #myDetailRow (toggle)="onDetailToggle($event)">
    <ng-template let-rowIndex="rowIndex" let-row="row" let-value="value" let-expanded="expanded"
      ngx-datatable-row-detail-template>
      <span class="rowDetail" title="Click to edit" (click)="editing[rowIndex + '-name'] = true"
        *ngIf="!editing[rowIndex + '-name']"> {{row.name}} </span>
      <mat-form-field floatPlaceholder='never' *ngIf="editing[rowIndex + '-name']">
        <input matInput style="min-width:300px" (keyup.enter)="updateValue($event, 'name', rowIndex)" type="text" …

我正在使用Angular的Ngx-datatable. https://github.com/swimlane/ngx-datatable

它的加载数据没有任何问题.

每当我将鼠标指针移到数据行上时,我遇到的问题是ngx-datadatable.

无论如何我可以禁用它吗？

我正在研究一个Angular 2项目.我使用ngx-datatable显示用户列表:

<ngx-datatable class="material"
[rows]="rows"
[columnMode]="'force'"
[headerHeight]="40"
[footerHeight]="40"
[rowHeight]="30"
[externalPaging]="true"
[limit]="limit"
(select)='onSelect($event)'
(activate)='onActivate($event)'
[selected]="selected"
[selectionType]="'checkbox'">
<ngx-datatable-column
    [width]="30"
    [sortable]="false"
    [canAutoResize]="false"
    [draggable]="false"
    [resizeable]="false"
    [headerCheckboxable]="true"
    [checkboxable]="true">
  </ngx-datatable-column>
      <ngx-datatable-column name="Name">
        <ng-template let-value="value" ngx-datatable-cell-template>
            <div class="redNumber">{{value}}</div>
        </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="Title"></ngx-datatable-column>
  <ngx-datatable-column name="company"></ngx-datatable-column>
  <ngx-datatable-column name="Status" [cellClass]="getStatusClass">  
  </ngx-datatable-column>
<ngx-datatable-column name="Last connexion"></ngx-datatable-column>

当我点击触发以下SHOWALL()方法,什么也不会发生,除非我点击第二次按钮,列表被刷新,或者如果我点击一次,调整我的浏览器窗口,列表被刷新.如何能我正确刷新列表？我究竟做错了什么？在我的组件类中,我有这个:

export class M1OamRoomsListComponent{ 
    selected = [];
    public rows = [
      .... // list of users
    ];
public limit: number;

constructor(public translation: TranslationService){
    this.limit = 10;
}

getStatusClass({ row, column, value }): any {
    return { …

正如我所看到的那样,这个问题可能已经有了答案,这对我解决问题没有帮助.我的问题是ngx-datatable中的rowClass对我不起作用.

数据表代码 - test.component.html

<ngx-datatable class="material" 
            [rows]="rows" 
            [columnMode]="'force'" 
            [reorderable]="reorderable"
            [rowClass]="getRowClass"
            (activate)="onActivate($event)">
            <ngx-datatable-column name="Cabinet Name" [flexGrow]="1">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    <mat-icon class='folder-color'>folder</mat-icon>
                    {{ row?.cabinetname }}
                </ng-template>
            </ngx-datatable-column>
</ngx-datatable>

TS代码 - test.component.ts

getRowClass = (row) => {
   return {
     'row-color': true
   };
}

SCSS代码 - test.component.scss

.row-color {
    background-color: green;
}

在chrome开发人员工具中,它显示添加的行颜色类,但行不是绿色作为背景颜色.我不知道上面的代码有什么问题.请指导我解决问题的正确方法.

注意:我正在开发Angular 5

我在 Angular 应用程序中使用 ngx-datatable。我想知道是否可以将垂直滚动与自动行高一起使用。这意味着如果表格单元格中的文本变大，则行的长度将会扩展。如果设置属性 [rowHeight]="'auto'"，则效果非常好。但是，当使用 [scrollbarV]="true" 时，由于使用了虚拟滚动机制，行高必须是一个数字。有人有解决方法吗？

<ngx-datatable
    style="height: 700px;"
    class="material"
    [columnMode]="'flex'"
    [headerHeight]="50"
    [footerHeight]="40"
    [rowHeight]="'auto'"
    [scrollbarH]="true"
    [scrollbarV]="true"
    [rows]="data">
    <ngx-datatable-column name="test" [flexGrow]="1" [minWidth]="120" [maxWidth]= "120">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="test" [flexGrow]="1" [minWidth]="80">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row}}
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>

github 上有一个未解决的问题，但提出的解决方案不起作用。 https://github.com/swimlane/ngx-datatable/issues/1292

我覆盖了 ngx-datatabledatatable-body-cell-label类的 css，以允许内容在打印时换行。然而，作为一个不受欢迎的副作用，当分页时，换行的文本会被切断。我尝试通过添加page-break-inside: avoid;' to the css for both thedatatable-body-cell anddatatable-body-cell-label` 类来解决此问题，但无济于事。

模板中的 ngx-datatable：

    <ngx-datatable class="material results-grid engagement-specifics" [rows]="engagementSpecifics"
                   [columns]="engagementSpecificsGridColumns"
                   [headerHeight]="30" [footerHeight]="0" [rowHeight]="70"
                   [rowClass]="getEngagementSpecificsRowClass"
                   *ngIf="showReport(['engagementSpecifics'])">
    </ngx-datatable>

相关CSS：

.datatable-body-cell {
    @media print {
      page-break-inside: avoid;
    }
  }

  .datatable-body-cell-label {
    @media print {
      // allow text wrapping
      white-space: normal !important;
      page-break-inside: avoid;
    }
  }

我想将日期列格式化为 Angular 2 NGX 数据表中的短日期。

这是 HTML：

<ngx-datatable
  [rows]="toDos"
  [columns]="columns">
</ngx-datatable>

这是组件 TypeScript

import { Component, OnInit } from '@angular/core';
import { IToDo } from '../shared/todo';
import { ToDoService } from '../shared/todo.service';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})

export class TodoListComponent implements OnInit {

  toDos: IToDo[];
  columns = [
    { prop: 'toDoId' },
    { name: 'To Do', prop: 'name' },
    { prop: 'priority' },
    { prop: 'dueDate'  },
    { prop: 'completed' }
  ];

  constructor(private _toDoService: ToDoService) {
  } …

我有一个数据表，我在其中显示分支数据，但需要隐藏索引为 0 的项目。

    <ngx-datatable
          class="data-table table-responsive task-list-table"
          [rows]="branches"
          [loadingIndicator]="loadingIndicator"
          [columnMode]="'force'"
          [headerHeight]="50"
          [footerHeight]="50"
          [limit]="10"
          [rowHeight]="66"
          [reorderable]="reorderable">
          <ngx-datatable-column name="Branch Office Name">
            <ng-template let-rowIndex="rowIndex" *ngIf="rowIndex != 0" let- 
            branch="row" ngx-datatable-cell-template>
              {{branch['name']}}
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Parent Branch">
            <ng-template let-rowIndex="rowIndex" *ngIf="rowIndex != 0" let- 
             branch="row" ngx-datatable-cell-template>
              {{branch['parentOrganizationName']}}
            </ng-template>
          </ngx-datatable-column>
  </ngx-datatable>

我试过用 *ngIf 指令来做，但它不起作用。我该如何解决这个问题？