标签: ngx-datatable

我正在寻找一种方法将列添加到ngx-datatable"动态"但我无法找到方法.我想要完成的是某种日历.为了简单起见,我想说我想在表格中显示一些对象,例如:

rows: [
    { name: Joe, availableDays: [ { date:'01-01-2017', foo: true }, { date:'03-01-2017', foo: true }]} 
    { name: Jack, availableDays: [ { date:'01-04-2017', foo: true }]} 
]

现在我想看到以下列和值:

Name; 01-01-2017; 02-01-2017; 03-01-2017; 04-01-2017

Joe; true; false; true; false
Jack; false; false; false; true

忽略'foo'.我刚刚添加它以表明我正在寻找处理对象的东西.我很乐意在这个例子中使用它:https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/inline.component.ts

这里的语法是这样的:

 <ngx-datatable-column name="Name">
      <ng-template ngx-datatable-cell-template let-value="value" let-row="row">
       [...]
      </ng-template>
 </ngx-datatable-column>

谢谢!

我是Angular 4的新手，ngx-datatable但我陷入困境。现在，我有了一个简单的ngx-datatable rowDetail，就像这里显示的一样。问题是我需要rowDetail包含另一个，ngx-datatable而我什至不知道这是否可能。

有人可以给我一些线索吗？

提前致谢！

我正在尝试使用 ngx-datatable 包在我的 Angular 4 应用程序中显示一些数据，并且我对用于设置列宽度的“强制”模式特别感兴趣。据我了解，该模式应该根据单元格内容智能地确定列宽，以便所有内容都可见。然而，它对我不起作用。列的宽度设置为 150px，而不是它们各自的自定义宽度。

这是我的表格 HTML：

<ngx-datatable
  [rows]="rows"
  [columns]="columns"
  [columnMode]="'force'"
  [scrollbarV]="true"
  [scrollbarH]="true"
  [rowHeight]="50"
  >
</ngx-datatable>

这是我的配置：

rows = [
    { displayName: 'Austin', emailAddress: 'a@a.aa', role: 'Swimlane',
      a: 'This should all be visible and none of this should be cut off because the table is in force mode and it should keep it all visible' },
    { displayName: 'Dany', emailAddress: 'b@b.bb', role: 'KFC' , a:'b',
      b:'This text should also be completely visible due to the selected display mode …

我有一个数据表，我在其中显示分支数据，但需要隐藏索引为 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 指令来做，但它不起作用。我该如何解决这个问题？

我有一个表（ngx-datatable），我想在其中定义一个“操作”列，然后将在其中放置按钮以进行 CRUD 操作。

创建列并放置按钮有效，但我遇到的问题是，在我的触发函数中不再识别所选行及其列中的值。

这是我的模板：

<div class="col-12">
  <ngx-datatable
    #table
    class="material"
    [rowHeight]="'auto'"
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [limit]="10"
    [rows]="cars?.content"
    [selected]="selected"
    [selectionType]="'multi'">
  </ngx-datatable>
</div>

这是我的带有按钮的自定义模板：

<ng-template #buttonsTemplate let-row="row" let-value="value" let-button="column.actions">
  <button class="btn btn-transparent" (click)='onSelect($event)'><i class="rb-ic rb-ic-add-frame"></i></button>
  <button class="btn bt n-transparent" (click)='onSelect($event)><i class="rb-ic rb-ic-abort-frame"></i></button>
  <button class="btn btn-transparent" (click)='onSelect($event)><i class="rb-ic rb-ic-reset"></i></button>
  <button class="btn btn-transparent" (click)='onSelect($event)><i class="rb-ic rb-ic-agility"></i></button>
</ng-template>

我的组件（.ts 文件）的结构如下：

export class MyComponent implements OnInit, OnDestroy {
  @ViewChild('buttonsTemplate') buttonsTemplate: TemplateRef<any>;
  columns = [];

  ngOnInit() {
    this.columns = [
    {prop: 'id', name: 'Id'},
    {prop: …

我尝试ngx-datatable在我的 angular 4 项目中使用 system.js 来加载模块，但它会引发如下错误：

无法绑定到“行”，因为它不是 ngx-datatable 的已知属性。
无法绑定到“列”，因为它不是 ngx-datatable 的已知属性。
ngx-datatable 不是已知元素：

我猜 system.js 没有正确加载模块，但我找不到有关如何执行此操作的有效演示。该文档也没有帮助。

system.config.js：

map: {
     ...
     '@swimlane/ngx-datatable': 'npm:@swimlane/ngx-datatable/release/index.js',
     ...
}

app.module.ts:

import { NgxDatatableModule } from '@swimlane/ngx-datatable';
...
imports: [
    ...
    NgxDatatableModule,
    ...
],

组件.html：

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

组件.ts：

rows = [
    { name: 'Austin', gender: 'Male', company: 'Swimlane' },
    { name: 'Dany', gender: 'Male', company: 'KFC' },
    { name: 'Molly', gender: 'Female', company: 'Burger King' },
];
columns = …

我试图在拖动 ngx-datatable 的列标题时滚动水平滚动条。我正在使用 Angular4。在我的 ngx-datatable 中有水平滚动条，当我从左向右拖动第一列时，水平滚动条应该move.当我从左向右拖动ngx-datatable的列时，如何使水平滚动条移动。请帮我

 <ngx-datatable
    class="material"
    [rows]="row"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [reorderable]="true"
    [scrollbarV]="true"
    [scrollbarH]="true"
    >
    <ngx-datatable-column name="Name" [minWidth]="150" 
        [resizeable]="true">
      <ng-template let-column="column" ngx-datatable-header-template >
        Name
      </ng-template>

      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
        <div>
          {{row['Name']}}
        </div>
      </ng-template>
  </ngx-datatable-column>    

   <ngx-datatable-column name="Address" [minWidth]="150" 
        [resizeable]="true">
      <ng-template let-column="column" ngx-datatable-header-template >
        Address
      </ng-template>

      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
        <div>
          {{row['Address']}}
        </div>
      </ng-template>
  </ngx-datatable-column>  


   <ngx-datatable-column name="Age" [minWidth]="150" 
        [resizeable]="true">
      <ng-template let-column="column" ngx-datatable-header-template >
        Age
      </ng-template>

      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
        <div>
          {{row['Age']}}
        </div>
      </ng-template>
  </ngx-datatable-column>  

</ngx-datatable>

我正在遵循 ngx-datatable 的主题设置。

首先，我 npm 安装了 ngx-datatable 10.4.0，因为它与 Angular 4 和早期版本的 rxjs 兼容。

我的问题是表格的样式。

我的模板文件如下所示：

<div>
    <ngx-datatable
        [rows]="rows"
        [columns]="columns"
        [columnMode]="'standard'"
        class="material"
        fixed-header
        [headerHeight]="50"
        [scrollbarV]="true">
    </ngx-datatable>
</div>

我的 scss 文件内部：

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

我可以确认材质样式在一定程度上有效：

我想在标题下添加边框底部，但无济于事。

如果您查看演示：http://swimlane.github.io/ngx-datatable/#filter

示例表始终有一个底部边框。

如何配置表格以在标题下方插入边框底部？

我的 ngx-datatable 设置有问题吗？

无法正确显示 ngx 数据表默认页脚。它像这样显示页脚

我的代码

    <ngx-datatable
            #table
            [columnMode]="'force'"
            [headerHeight]="50"
            [rowHeight]="'auto'"
            [footerHeight]="50"
            [count]="true"
            [limit]="4"
            [rows]="data"
        >
    <ngx-datatable-column [width]=10>
      <ng-template let-row="row" ngx-datatable-cell-template>
        <span class="circle" [ngClass]="{'red': row.alertCat == 'HIGH','yellow': row.alertCat == 'MEDIUM', 'green': row.alertCat == 'LOW'}"></span>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="ID" [width]=10>
                    <ng-template let-column="column" ngx-datatable-header-template>
                            <strong class="text-uppercase alertHeading">ID</strong>
                    </ng-template>
      <ng-template let-row="row">
        {{row.id}}
      </ng-template>
    </ngx-datatable-column>
    </ngx-datatable>

在 ngx-data 表中如何循环遍历 ngx-data 表中的嵌套 Json 对象。

json 示例对象：

rows = [
{ name: 'Austin', gender: 'Male', company: 'Swimlane', topings:[
 { id:'101',name:'spinach'}]
 },
{ name: 'Dany', gender: 'Male', company: 'KFC',topings:[
 { id:'102',name:'onion'}] },
{ name: 'Molly', gender: 'Female', company: 'Burger King' ,topings:[
 { id:'103',name:'ginger'}]},

];

在 ngx-datatable 中，我需要如何循环遍历上面的 json 对象中的topings 并在数据表中显示toping 数据。任何人都可以回答我必须如何做到这一点......？