标签: primeng-datatable

我正在使用<p-table>，我必须对标题进行排序。我正在做如下：

的HTML

<p-table [value]="documents">
        <ng-template pTemplate="header">
            <tr>
                <th [pSortableColumn]="">
                    File Name
                    <p-sortIcon [field]=""></p-sortIcon>
                </th>
               <th [pSortableColumn]="">
                    File Type
                    <p-sortIcon [field]=""></p-sortIcon>
                </th>
               <th [pSortableColumn]="">
                    File Date
                    <p-sortIcon [field]=""></p-sortIcon>
                </th>
            </tr>
        </ng-template>
    <ng-template pTemplate="body" let-doc>
        <tr>
            <td>
                {{doc.sName}}
            </td>

        <td>
                {{doc.sType}}
            </td>
        <td>
                {{doc.sDate}}
            </td>                
        </tr>
    </ng-template>
</p-table>

TS

ngOnInit(){
    //made a service call and got data for

this.documents=[{
   "sName":"Book",
   "sType":"PDF",
   "sDate":"20"
   },
   {
   "sName":"Book",
   "sType":"PDF",
   "sDate":"20"
   },
   {
   "sName":"Cook Book",
   "sType":"Text",
   "sDate":"20"
   },
   {
   "sName":"Book",
   "sType":"PDF",
   "sDate":"25-04"
   },
   { …

我有下一个代码：

<p-dataTable [contextMenu]="cm" [value]="Usuarios" selectionMode="single" [(selection)]="selectedRecord" resizableColumns="true" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" scrollable="true" scrollWidth="100%">
        <p-column [sortable]="true" field="id" header="ID" [style]="{'width':'50px'}"></p-column>
        <p-column [sortable]="true" field="dni" header="DNI" [style]="{'width':'80px'}"></p-column>
        <p-column [sortable]="true" field="ap_paterno" header="Apellido Paterno" [style]="{'width':'120px'}"></p-column>
        <p-column [sortable]="true" field="ap_materno" header="Apellido Materno" [style]="{'width':'120px'}"></p-column>
        <p-column [sortable]="true" field="nombres" header="Nombres" [style]="{'width':'120px'}"></p-column>
        <p-column [sortable]="true" field="fecnac" header="Fecha de Nac" [style]="{'width':'150px'}"></p-column>
        <p-column [sortable]="true" field="est_civil" header="Estado Civil" [style]="{'width':'120px'}"></p-column>
        <p-column [sortable]="true" field="fec_ingreso" header="Fecha de Ingreso" [style]="{'width':'120px'}"></p-column>
        <p-column [sortable]="true" field="movil" header="Movil" [style]="{'width':'100px'}"></p-column>
        <p-column [sortable]="true" field="fijo" header="Fijo" [style]="{'width':'90px'}"></p-column>
        <p-column [sortable]="true" field="direccion" header="Dirección" [style]="{'width':'180px'}"></p-column>
        <p-column [sortable]="true" field="distrito" header="Distrito" [style]="{'width':'200px'}"></p-column> …

如何将超链接添加到primeng datatable列以将该列值传递到angular 2应用程序中的新窗口？

<p-column field="name" header ="Name" [sortable]="true" [filter]="true" >
    <ng-template let-row="rowData" pTemplate type="body">
      {{row.name}}
    </ng-template>
  </p-column>

在数据表中单击名称时，必须在新页面的文本框中显示名称。谁能为此提供代码示例？

我有10列的PrimeNG数据表。最后一列包含图像。单击图像后，我必须突出显示该行。

如果我在数据表中添加选择模式“单一”，则在单击行时会突出显示该行。我不要那个。我希望仅在用户单击最后一列的图像时将其突出显示。

<p-column>
        <ng-template let-row="rowData" pTemplate type="body">
          <img src="assets/images/info_icon.jpg" style="height:20px;width:20px">
        </ng-template>
  <p-column>

如何在给定记录后自动选择 dataTable 中的一行？数据表具有排序列和分页。在给定记录之后，我希望在存在的页面上选择该记录。

如何将变量分配给 primeng TurboTable ColGroup colspan 属性。

<ng-template pTemplate="header">
    <tr>
        <th rowspan="3">Brand</th>
        <th colspan="4">Sale Rate</th>
    </tr>
    <tr>
        <th colspan="colSpanCount">Sales</th>
        <th colspan="2">Profits</th>
    </tr>
    <tr>
        <th>Last Year</th>
        <th>This Year</th>
        <th>Last Year</th>
        <th>This Year</th>
    </tr>
</ng-template>

在上面的示例中，我想将 colSpanCount 变量绑定到 p 表的 colspan 属性。

我正在使用p-table带有“分页器”和“延迟加载”的组件，并且我根据需要制作了一个搜索组件。
当我进行过滤并且页面索引位于另一个页面上时，我正在尝试解决该问题。
示例：
页面索引 = 2
过滤文本 = texto。

然后，我更新表上的记录和页数。但如果结果有更多或相等数量的索引页，则页索引继续为 2。

我尝试从 Event 更改值，但它不适用。

文档 PrimeNG 延迟加载：

loadData(event: LazyLoadEvent) {
  //event.first = First row offset
  //event.rows = Number of rows per page
  //event.sortField = Field name to sort in single sort mode
  //event.sortOrder = Sort order as number, 1 for asc and -1 for dec in single sort mode
  //multiSortMeta: An array of SortMeta objects used in multiple columns sorting. Each SortMeta has field and order properties.
  //filters: …

Run Code Online (Sandbox Code Playgroud)

我想在拖放两行数据后触发重新排序事件，但在下面的文档中看不到它：
https://www.primefaces.org/primeng/#/table/reorder

谁能帮帮我，谢谢！

我在从p-datatable.

TS

public files: UploadFile[] = [];
deleteAttachement(index) {

    if (this.files.length > 0) {
        for(let file2 of this.files) {
            if (file2.fileEntry.isFile) {
                const fileEntry = file2.fileEntry as FileSystemFileEntry;
                fileEntry.file((file: File) => {
                    console.log("-------------");
                    console.log("File: "+file.name);
                });
            }
        }

        this.files.splice(index, 1);

        for(let file2 of this.files) {
            if (file2.fileEntry.isFile) {
                const fileEntry = file2.fileEntry as FileSystemFileEntry;
                fileEntry.file((file: File) => {
                    console.log("_______________");
                    console.log("File: "+file.name);
                });
            }
        }
    }

}

HTML

<p-dataTable [value]="files" *ngIf="files.length > 0">
<p-column>
  <ng-template let-index="rowIndex" pTemplate type="body">
    <p-button …