使用复选框进行多项选择 [PrimeNG]

Question

我需要“多项选择（单击 + 移位）”方面的帮助，但我不明白如何使它在复选框上起作用。

在文档中有一个示例“复选框选择”并注意 “通过将列的 selectionMode 属性启用为“多个”，也可以使用复选框来处理多项选择。

文档中的示例：

<p-table [value]="products" [(selection)]="selectedProducts3" dataKey="code" responsiveLayout="scroll">
    <ng-template pTemplate="header">
        <tr>
            <th style="width: 3rem">
                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th>
            <th>Code</th>
            <th>Name</th>
            <th>Category</th>
            <th>Quantity</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product>
        <tr>
            <td>
                <p-tableCheckbox [value]="product"></p-tableCheckbox>
            </td>
            <td>{{product.code}}</td>
            <td>{{product.name}}</td>
            <td>{{product.category}}</td>
            <td>{{product.quantity}}</td>
        </tr>
    </ng-template>
</p-table>

但是当我尝试添加这个属性 'selectionMode' 时它仍然不起作用。

我的新例子：

<p-table [value]="products" [(selection)]="selectedProducts3" dataKey="code" responsiveLayout="scroll"
         selectionMode="multiple"> // <--------- Added line with selectionMode property
<ng-template pTemplate="header">
    <tr>
        <th style="width: 3rem">
            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
        </th>
        <th>Code</th>
        <th>Name</th>
        <th>Category</th>
        <th>Quantity</th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-product>
    <tr>
        <td>
            <p-tableCheckbox [value]="product"></p-tableCheckbox>
        </td>
        <td>{{product.code}}</td>
        <td>{{product.name}}</td>
        <td>{{product.category}}</td>
        <td>{{product.quantity}}</td>
    </tr>
</ng-template>

我认为有一些愚蠢的错误，但我是 PrimeNG 的新手，所以会很乐意提供任何帮助。

这里是demo。

Answer 1

您必须将 metaKeySelection 属性设置为 true 才能使用 (click + shift) 启用多选
要使行可选择，请使用pSelectableRow 和pSelectableRowIndex 属性。

修改后的代码如下：

<p-table
    [value]="products"
    [(selection)]="selectedProducts3"
    dataKey="code"
    selectionMode="multiple"
    [metaKeySelection]="true"
  >
    <ng-template pTemplate="header">
      <tr>
        <th style="width: 3rem">
          <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
        </th>
        <th>Code</th>
        <!-- others -->
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product let-rowIndex="rowIndex">
      <tr [pSelectableRow]="product" [pSelectableRowIndex]="rowIndex">
        <td>
          <p-tableCheckbox
            [value]="product"
          ></p-tableCheckbox>
        </td>
        <td>{{ product.code }}</td>
        <!-- others -->
      </tr>
    </ng-template>
</p-table>