时间戳

首页 > 解决方案 > “如何解决 Angular 中的 NGX 数据表复选框问题？”

javascript - “如何解决 Angular 中的 NGX 数据表复选框问题？”

问题描述

我刚刚制作了用于所有索引的通用 NGX 数据表，但是每当我在表中使用复选框时，它总是出现在索引的最后一列中。每当我单独应用时，它出现在第一列但我不想使用它单独使用，因为它在每个索引中使用。

------------------------ 个别表------------ ---

 <div class="row">
          <ngx-datatable-footer>
            <ng-template *ngIf="filerData.total>0" ngx-datatable-footer-template let-rowCount="filerData.total"
              let-pageSize="pageSize" let-selectedCount="selectedCount" let-curPage="curPage"
              let-offset="offset">
              <div class="col-md-1 datatable-footer_pagination">
                <select class="form-control" (change)="onPager($event.target.value,curPage)">
                  <option *ngFor="let option of pageLimitOptions" [value]="option.value"
                    [selected]="option.value == 15">
                    {{option.name}}
                  </option>
                </select>
              </div>
              <datatable-pager class="mb-2" [pagerLeftArrowIcon]="'datatable-icon-left'"
                [pagerRightArrowIcon]="'datatable-icon-right'" [pagerPreviousIcon]="'datatable-icon-prev'"
                [pagerNextIcon]="'datatable-icon-skip'" [page]="curPage" [size]="pageSize"
                [count]="filerData.total" (change)="onPager($event,curPage)">
              </datatable-pager>
            </ng-template>
            <ng-template ngx-datatable-footer-template let-rowCount="filerData.total" let-pageSize="pageSize"
              let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset">
              <div class="col-md-4 datatable-footer_pagination"> No Data To Display
              </div>
            </ng-template>
          </ngx-datatable-footer>
        </div>
      </ngx-datatable>

------------------------------------ 常用表------------------------ ---

<app-ws-table [rows]="rows" (onSort)="onSort($event)" [isCheckBox]="true" [columns]="columns"
                [loading]="tableLoading" [rowCount]="filerData.total" [rowOffset]="filerData.current_page"
                [rowLimit]="filerData.per_page" (onPager)='onPager($event)' (rowDelete)="onDeletion($event)"
                (rowEdit)="onEdit($event)" [isClass]="true" [isLocal]="false" (selectedItem)="selectedClasses($event)"
                (onDownload)="onFiles($event)">
              </app-ws-table>

标签： javascriptangulartypescriptngx-datatable

解决方案

这对我有用。在 HTML 中

<ngx-datatable [rows]="rows" 
[columns] = "[
         {name:'select', cellTemplate: checkBox},
         {name:'column one', prop:'one'},
         {name:'column two', prop:'two'},
         {name:'column three', prop : 'three'}
         {name:'column four', prop: 'four'}]">
   <ng-template #checkBox let-row="row" let-value="value">
          <input type="checkbox">                         
   </ng-template>
</ngx-datatable>

这会奏效。将数据分配给您想要的行。在 TS 中，
this.rows = data

推荐阅读