标签: ngx-datatable

要求：

使用ngx-datatable显示动态数据，并使用页面ID使用分页

说明：

我有一个动态数据，在这里我使用ngx-datatable以角度显示它，这里一切正常，但问题是我不确定如何使用page_id（使用post body发送到服务器）应用分页。在这里，我将获得page_id以及API响应，这是第一个API调用。在这里，page_id必须作为主体发送，用于获取其余结果的相同API。

例如：假设我在1ST API调用中有20个结果，我将通过使用页面ID获得10条记录和一个页面ID，如何获得下10个结果

我实现了什么：

获取数据并将其显示在已应用的表基本分页中

下面是我的代码：

Result=[];
  reorderable: boolean = true;
  selected = [];
  rows = [];
  columns = [];
  DataArray = [];
  Results = {
    "data": [
      {
        "_score": 0.36464313,
        "_type": "data",
        "_id": "abcd",
        "_source": {
          "filter": "data",
          "information": {
            "product_id": "abcd",
            "creation_utctime": "1477335693653"
          },
          "enduser": "free"
        },
        "_index": "dell_laptop"
      },
      {
        "_score": 0.36464314,
        "_type": "data",
        "_id": "abcde",
        "_source": {
          "filter": "data",
          "information": {
            "product_id": "abcde",
            "creation_utctime": "1477335693653"
          },
          "enduser": "free"
        },
        "_index": …

我正在使用 ngx-datatable 创建一个可重用的数据表，我希望在行细节内呈现动态组件。数据表组件从父模块接收组件类作为参数，我使用 ComponentFactory 来创建组件。我可以看到构造函数和 onInit 方法正在为动态组件运行，但它没有附加到 DOM。

这是 datatable html 中 row-detail 的样子：

 <!-- [Row Detail Template] -->
        <ngx-datatable-row-detail rowHeight="100" #myDetailRow (toggle)="onDetailToggle($event)">
          <ng-template let-row="row" #dynamicPlaceholder let-expanded="expanded" ngx-datatable-row-detail-template>
          </ng-template>
        </ngx-datatable-row-detail>
 <!-- [/Row Detail Template] -->

这就是我的 .ts 文件的样子：

@ViewChild('myDetailRow', {static: true, read: ViewContainerRef}) myDetailRow: ViewContainerRef;
@ViewChild('dynamicPlaceholder', {static: true, read: ViewContainerRef}) dynamicPlaceholder: ViewContainerRef;

renderDynamicComponent(component) {
        var componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
        var hostViewConRef1 = this.myDetailRow;
        var hostViewConRef2 = this.dynamicPlaceholder;
        hostViewConRef1.createComponent(componentFactory);
        hostViewConRef2.createComponent(componentFactory);
}

还有一点是，如果我的#dynamicPlaceholderng-template 放在 ngx-datatable 之外，它就可以工作，并且动态模块会被渲染和显示。

虽然我对角度非常新,但我在使用ngx-DataTable时遇到了一些困难.我使用简单的ngx-DataTable进行简单的操作.问题出在一个列上,虽然我已经将attr声明为[sortable] = true,但排序不起作用.这是代码.表定义:

 <ngx-datatable
                [columns]="columns"
                [columnMode]="'force'"
                [headerHeight]="40"
                [footerHeight]="50"
                [rowHeight]="'auto'"
                [limit]="10"
                [rows]='contacts'>

DataTable包含两列,定义如下.

    <ngx-datatable-column
                        [width]="50"
                        [resizeable]="true"
                        [sortable]="true"
                        [draggable]="true"
                        [canAutoResize]="true" name="Name">
       <ng-template let-row="row" ngx-datatable-cell-template>
          <span>{{row.first_name}}</span>
       </ng-template>
   </ngx-datatable-column>

    <ngx-datatable-column
                        [width]="50"
                        [resizeable]="true"
                        [sortable]="true"
                        [draggable]="true"
                        [canAutoResize]="true" name="Actions">
        <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>
      <!--Template Here-->
        </ng-template>
   </ngx-datatable-column>

我只是想让我的名字列可以排序.请帮帮我们.提前致谢.

我正在尝试将Bootstrap主题应用于我的数据表.我使用的是ngx-datatable10.4.0版,因为我仍然使用Angular 4而且11.0不兼容.根据更改日志,Bootstrap主题在版本10.3.0中添加.

以下是我的component.html:

<div>
    <ngx-datatable class="bootstrap" [rows]="rows" [columns]="columns" (select)='onSelect($event)' [selected]="selected" [selectionType]="'single'"
        [limit]="10" [columnMode]="'force'" [headerHeight]="40" [footerHeight]="40" [rowHeight]="'auto'">
    </ngx-datatable>
</div>

但是,这不会像演示中那样添加样式.我想我已经包含了文档显示的所有内容.

我正在使用Bootstrap 3.3.7.需要4.0吗？我没有正确包含某些内容吗？

如何自定义ngx数据表.我无法找到,我必须更改代码以摆脱这些记录总数,并用下拉菜单替换它以显示每页的项目.我的分页也缺少一些图标.

我目前在让ngx-datatable拥有正确的css时遇到问题.我在我的css文件中有这个导入正确的CSS.

@import '@swimlane/ngx-datatable/release/index.css';
@import '@swimlane/ngx-datatable/release/themes/material.css';
@import '@swimlane/ngx-datatable/release/assets/icons.css';

它似乎只是做了一半的假设.这是我的html调用库的部分.

  <ngx-datatable  class="material striped"
    class="material"
    [rows]="rows"
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="100">
  </ngx-datatable>

如果有人知道为什么会这样,那将非常有帮助.

@amcdnl任何线索,如果你读到这个,很抱歉打扰你

CSS问题

我一直试图让这个工作没有运气.我一直在引用这些资源寻求帮助:http: //swimlane.github.io/ngx-datatable/#filter
https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter. component.ts

基本上我只是想让我的过滤器应用于多个列,而不需要实现代码来处理每一列.(有些数据表有​​20多列!)

示例代码:

//HTML
  <input type='text' placeholder='Filter' (keyup)='updateFilter($event.target.value)' />

  <ngx-datatable
    class="material"
    columnMode="force"
    [columns]="gridProperties.FilteredColumns"
    [footerHeight]="50"
    [loadingIndicator]="gridLoadingIndicator"
    [rows]="filteredList"
    [scrollbarH]="false"
    [scrollbarV]="true"
    [selected]="selectedItem"
    [selectionType]="'single'"
    style="min-height:400px;">
  </ngx-datatable>

//TYPESCRIPT
  public items: Item[];

  updateFilter(filterValue) {
    const lowerValue = filterValue.toLowerCase();

    this.filteredList = this.items.filter(item => item.name.toLowerCase().indexOf(lowerValue) !== -1 || !lowerValue);
  }

在这里,我显然只是处理我的items数组的'name'属性的过滤.这很好用,但就像我提到的那样,如果网格包含很多列,我想要一种方法来处理所有这些.任何帮助或提示表示赞赏.

我需要从ngx-datatable标题单元格和正文单元格中删除填充.

我的实际解决方案如下:

.datatable-body-cell {
  padding: 0 !important;
}

.datatable-header-cell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

calendar.component.scss

@Component({
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})

calendar.component.ts

我遇到的问题是我需要禁用ViewEncapsulation覆盖ngx-datatable CSS类datatable-body-cell和datatable-header-cell.由于我也在其他组件中使用ngx-datatable,因此当我导航到其他组件时,CSS仍会被覆盖.只有当我刷新其他组件中的CSS时才会显示它应该.

是否还有其他可能在不影响其他组件的情况下覆盖组件中库的CSS？

我正在使用Angular 5.

我在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)"> …