primeng DataTables에서 HTML 템플릿을 사용하려면 어떻게해야합니까?

Question

Primeng의 dataTable을 사용하고 있지만 HTML 코드를 헤더 값으로 설정하는 방법을 찾을 수 없습니다. 나는 테이블의 첫 번째 헤더를 설정해야

은 체크 박스/라디오입니다하지만 난 단지 내가 데이터 테이블에서 템플릿의 알고 p-column

에 header 속성을 사용하여 텍스트를 추가 할 수 있습니다. 어떻게 이것을 사용할 수 있습니까?

Here I want to set checkbox instead of text in header (first row)

어떤 생각 ?

Answer 1

프라 딥, 라디오, 체크 박스 '하나'와 '복수'옵션으로 선택 모드를 지원 (26) 7 월에 발표

PrimeNG 베타-11.

의 RadioButton :

<p-column [style]="{'width':'38px'}" selectionMode="single"></p-column> 

확인란 :

<p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column> 

당신은 여기에서 상세 정보를 찾을 수 있습니다 - http://www.primefaces.org/primeng/#/datatableselection이

Answer 2

PrimeNG Beta.14는 머리글과 바닥 글 섹션에서 템플릿을 지원합니다.

기본적으로 해당 셀의 필드 데이터가 셀 내용으로 표시되며 템플릿에 전달 된 암시 적 변수가 열 정의이고 현재 행의 데이터가 rowData 속성 인 템플릿을 사용하여 사용자 정의 할 수 있습니다. 또한 현재 색인은 선택적인 rowIndex 변수를 사용하여 액세스 할 수 있습니다. 마찬가지로 맞춤 설정 콘텐츠는 템플릿이있는 열의 머리글과 바닥 글에 배치 할 수 있습니다.

열 안의 템플릿은 템플릿이 속하는 위치를 나타내는 type 속성과 함께 pTemplate 지시문으로 장식되어야합니다. 가능한 값은 "header", "body"및 "footer"입니다.

<p-column field="color" header="Color"> 
    <template let-col #car="rowData" #ri="rowIndex" pTemplate type="body"> 
     <span">{{car[col.field]}}</span> 
    </template> 
</p-column> 
<p-column> 
    <template pTemplate type="header"> 
     <button type="button" pButton (click)="selectAllCars()" icon="fa-check"></button> 
    </template> 
    <template let-car="rowData" pTemplate type="body"> 
     <button type="button" pButton (click)="selectCar(car)" icon="fa-search"></button> 
    </template> 
</p-column> 

Answer 3

Angular 4 및 PrimeNG 4의 경우 템플릿에 ng-template이 사용되지 않습니다.

다음 코드는 ng-template을 사용하여 PrimeNG p-dataTable 구성 요소에 링크를 추가하는 방법을 보여줍니다.

<p-dataTable [value]="myStore.myList | async"> 
<p-column field="name" header="Name"> 
    <ng-template let-col let-myItem="rowData" pTemplate="body"> 
    <a href="#" (click)="selectItem(myItem);"> 
     {{myItem[col.field]}} 
    </a> 
    </ng-template> 
</p-column> 
... 

"let-col"태그는 $ implicit 컨텍스트 변수를 통해 템플릿 내에서 Column 객체를 사용할 수있게합니다. 가능한 모든 필드를 보려면 PrimeNG common shared.d.ts 소스 파일에서 열을 참조하십시오. 상당수가 있습니다.

태그

let-myItem="rowData" 

는 템플릿에 전체 rowData 하행 필드를 사용할 수 있습니다.

또 다른 태그 렛 내가 사용하기 위해 현재 행 인덱스를 사용할 수 있도록 : 템플릿 각 템플릿을 연결하는 방법을 결정하는 데 사용하는 경우

let-ri="rowIndex" 

pTemplate 지시어는 PrimeNG DataTable에 필요합니다. 가능한 값은 "header", "body"및 "footer"입니다. PrimeNG DataTable Documentation