标签: ngx-datatable

在Angularjs中，我们曾经使用ui-grid。但是它在angular 2中不可用。我尝试了ngx-datatable，但在与分页一起使用时发现滚动问题。Ag-grid不是免费的。我找到了Microsoft的angular2 slickgrid，但没有找到太多有关该文件的信息。有谁知道angular2 slickgrid，有人使用过吗？

<ngx-datatable id ="ngxdatatable" class='material striped' [rows]="rows" [columns] ="columns" </ngx-datatable>

我试图绑定列，使用类对象中的列属性在运行时获取哪些列。我想使用css使用单元格类设置特定列的样式。如何做到这一点。请帮忙

我正在尝试使用 ngx-datatable ,安装后我遇到了编译错误.我从最近几个小时开始搜索这个问题,并且不知道是什么导致了这个问题.

• 使用通常的方式安装它: npm install @swimlane/ngx-datatable
• 导入模块 app.module.ts

import { NgxDatatableModule } from '@swimlane/ngx-datatable

 imports: [
    NgxDatatableModule,
    BrowserModule]

HTML:

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

my-package/node_modules/@swimlane/ngx-datatable/release/types/column-mode.type.d.ts(216)中的错误 :在环境枚举声明中,成员初始值设定项必须是常量表达式.

my-package/node_modules/@swimlane/ngx-datatable/release/types/column-mode.type.d.ts(3,12)中的错误 :在环境枚举声明中,成员初始值设定项必须是常量表达式.

my-package/node_modules/@swimlane/ngx-datatable/release/types/column-mode.type.d.ts(4,13)中的错误 :在环境枚举声明中,成员初始值设定项必须是常量表达式.

my-package/node_modules/@swimlane/ngx-datatable/release/types/sort.type.d.ts(214)中的错误 :在环境枚举中,声明成员初始值设定项必须是常量表达式.

my-package/node_modules/@swimlane/ngx-datatable/release/types/sort.type.d.ts(3,13)中的错误 :在环境枚举中,声明成员初始值设定项必须是常量表达式.

my-package/node_modules/@swimlane/ngx-datatable/release/types/sort-direction.type.d.ts(2111)中的错误 :在环境声明中,成员初始值设定项必须是常量表达式.

my-package/node_modules/@swimlane/ngx-datatable/release/types/sort-direction.type.d.ts(3,12)中的错误 :在环境声明中,成员初始值设定项必须是常量表达式.

my-package/node_modules/@swimlane/ngx-datatable/release/types/selection.type.d.ts(214)中的错误 :在环境枚举中,成员初始值设定项必须是常量表达式.

my-package/node_modules/@swimlane/ngx-datatable/release/types/selection.type.d.ts(3,13)中的错误 :在环境枚举中,成员初始化程序必须是常量表达式.

my-package/node_modules/@swimlane/ngx-datatable/release/types/selection.type.d.ts(4,18)中的错误 :在环境枚举中,成员初始化程序必须是常量表达式.

my-package/node_modules/@swimlane/ngx-datatable/release/types/selection.type.d.ts(5,12)中的错误 :在环境枚举中,成员初始值设定项必须是常量表达式.

my-package/node_modules/@swimlane/ngx-datatable/release/types/selection.type.d.ts(6,16)中的错误 :在环境枚举中,成员初始化程序必须是常量表达式.

my-package/node_modules/@swimlane/ngx-datatable/release/types/click.type.d.ts(214)中的错误 :在环境枚举声明中,成员初始值设定项必须是常量表达式.

my-package/node_modules/@swimlane/ngx-datatable/release/types/click.type.d.ts(3,14)中的错误 :在环境枚举声明中,成员初始值设定项必须是常量表达式.

my-package/node_modules/@swimlane/ngx-datatable/release/types/contextmenu.type.d.ts(214)中的错误 :在环境枚举声明中,成员初始值设定项必须是常量表达式.

my-package/node_modules/@swimlane/ngx-datatable/release/types/contextmenu.type.d.ts(3,12)中的错误 :在环境枚举声明中,成员初始值设定项必须是常量表达式.

感谢帮助.

我正在使用 ngx-datatable 列出一些我想使用函数调用选择所有行的用户。有什么办法吗？我正在使用角度 4

我的表单数组html标记完美运行，（缩短了快照）

 <div formArrayName="partners">
   <div class="row" *ngFor="let ctrl of this.patientRestrationForm.get('partners').controls; let i = index"[formGroupName]="i">
     <div class="col-xs-8">  
      <input type="text" class="form-control" formControlName="recordId">
     </div>
     <div class="col-xs-8">
       <input type="text" class="form-control" formControlName="patientFileId">
     </div>
 </div>

现在我知道我们可以根据内联ngx-datatable doc定义列。

是否有可能将这些控件绑定到ngx-datatable定义的列

<div formArrayName="partners">
   <ngx-datatable #mydatatable class="material" [headerHeight]="50" [limit]="5" [columnMode]="'force'" [footerHeight]="50" [rowHeight]="'auto'"
   [rows]="this.patientRestrationForm.get('partners').value">
   <ngx-datatable-column name="recordId">
      <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
         <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']">
         {{value}}
         </span>
         <input [formControlName]="'recordId'" autofocus (blur)="updateValue($event, 'name', rowIndex)" *ngIf="editing[rowIndex+ '-name']"
         type="text" [value]="value" />
      </ng-template> …

我目前正在使用 ngx-datatable(with [columnMode]="'force'")我想阻止用户调整列大小。是否可以？我当前的代码如下所示：

<ngx-datatable *ngIf="viewType==='client-stats'"
             class='bootstrap fixed-header clients-infos'
             [rows]='rows'
             [columnMode]="'force'"
             [headerHeight]="34"
             [footerHeight]="60"
             [rowHeight]="60"
             [selectionType]="'multiClick'"
             [selected]="selectedRows"
             (select)='onSelect($event)'
             [limit]="10"
             >
  <ngx-datatable-column name="lastname">
     <ng-template let-value="value" ngx-datatable-cell-template>
       {{value |titlecase}}
     </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="Firstname">
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{value |titlecase}}
    </ng-template>
    </ngx-datatable-column>
    ...
</ngx-datatable>
</section>

我在我的 angular 项目中使用了 ngx-datatable。列是 -> “估计生产率”、“Wk1Rate”、“WK2Rate”、“WK3Rate”。

我使用 css 为文本应用了 Wrapping，以便在标题单元格中容纳文本 - “估计生产率”。因此，估计生产率显示在 3 行中，而其他列名称显示在一行中。headerheight 是“auto”，标题单元格的文本对齐是“center”

问题 - 文本 - “Wk1Rate”、“WK2Rate”、“WK3Rate” - 在标题单元格内未垂直对齐。这些文本显示在顶部，如图所示：

如何使这些列垂直居中对齐。？我试过垂直对齐：中间，但没有用。请帮忙。

ngx-datatable 的 html 代码：

    <ngx-datatable class="material" [rows]="MyRows" [headerHeight]="'auto'" [footerHeight]="40"
     [rowHeight]="37" [limit]="10">
        <ngx-datatable-column name="Est Production Rate" [sortable]="false" 
         [width]="85">
            <ng-template ngx-datatable-cell-template let-value="value">
                {{value}}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Wk1Rate" [width]="80">
            <ng-template ngx-datatable-cell-template let-value="value">
                {{value}}
            </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="Wk2Rate" [width]="80">
            <ng-template ngx-datatable-cell-template let-value="value">
                {{value}}
            </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="Wk3Rate" [width]="80">
            <ng-template ngx-datatable-cell-template let-value="value">
                {{value}}
            </ng-template>
        </ngx-datatable-column>
    </ngx-datatable>

闪电战

我在 Angular 7 中使用 ngx-datatable。我需要根据数据集附带的颜色值动态更新表行颜色。

我试过rowClass功能。但这不是我要找的。

如何background-color使用数据集中的颜色代码动态设置行？

这是堆栈闪电战

我正在使用 ngx-data 表并使用 ngx-data 表的复选框类型。我只想选择当前页面行，但当我选择所有选项时，它会选择数组中的所有行。我的代码在这里

<ngx-datatable-column [width]="50" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false">
                          <ng-template class="datatable-checkbox" ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
                            let-selectFn="selectFn">
                            <div class="checkbox-fade fade-in-default datatable-header-cell-label">
                              <label>
                                <input type="checkbox" [checked]="allRowsSelected" (change)="selectFn(!allRowsSelected)" />
                                <span class="cr">
                                  <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                </span>
                              </label>
                            </div>
                          </ng-template>
                          <ng-template class="datatable-checkbox" ngx-datatable-cell-template let-value="value" let-isSelected="isSelected" let-onCheckboxChangeFn="onCheckboxChangeFn">
                            <div class="checkbox-fade fade-in-default datatable-header-cell-label">
                              <label>
                                <input type="checkbox" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
                                <span class="cr">
                                  <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                </span>
                              </label>
                            </div>
                          </ng-template>
                        </ngx-datatable-column>

如何仅在全选选项上选择当前页行？

我在尝试添加ngx-datatable到我的ionic + angular项目时遇到错误。我收到了成百上千的错误行，它似乎没有添加ngx-database到我的项目中。我正在关注Add ngx-datatable with ionic 5以添加ngx-datatable到我的项目中。

包.json

"@angular/common": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@ionic-native/core": "^5.0.7",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^5.0.0",
"@swimlane/ngx-datatable": "^17.0.0",
"core-js": "^2.5.4",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"

在 app/home.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from …