PrimeNG select datatable cell

Question

私は、セルをダブルクリックして選択し、ダイアログボックスを開いてセルの基礎となるデータを変更できるようにするために、Angular 4とPrimeNGを使ってプロジェクトを進めています。

私がドキュメントから見る限り、これを達成する方法は現在ありません。この状況を処理する最善の方法は何ですか？

ありがとうございました。

Answer 1

私はPrimeNG（私が愛しているbtw）の人々がこの機能を含むのを待っている間に、私は解決策を思いつきました。

最初の問題は、ユーザーがダブルクリックしたセルを特定することでした。

<p-dataTable #grd [value]="view" 
 
       (onRowDblclick)="editTemplate($event)" 
 
       (onRowClick)="clearSelection($event)"> 
 
     <p-column field="SomeFieldName" header="Header" [editable]="false"> 
 
      <ng-template let-col let-data="rowData" pTemplate="body"> 
 
       <div [id]="col.field" class="cell-content"> 
 
        <div [innerHTML]="data[col.field]" class="center-parent-screen"></div> 
 
       </div> 
 
      </ng-template> 
 
     </p-column>

すべての列は、私はクラスのセルを持つdiv要素でラップされ、ダブルクリックでの取り扱いに興味があります：私はdivの中のすべての列のテンプレートを持っていることによって、私は参照するを得ることができたということでした-コンテンツ。 id属性にも注意してください。フィールドと一致するように設定されています。そして、onRowDblclickイベントに：

editTemplate(e: any) { 
 
     let target = e.originalEvent.toElement.closest('div.cell-content'); 
 
     if (target && target.id) { 
 
      let td = target.closest('td'); 
 
      if (td) { 
 
       td.style.backgroundColor = 'darkorange'; 
 
       td.style.color = 'white'; 
 
      } 
 

 
      let fieldValue = e.data[target.id]; 
 
      //do something with this data 
 
     } 
 
    }

ここで重要なのは、id属性です。いったんこれを取得すると、どのセルがクリックされたのかわかり、実行する必要があることを実行できます。また、私は親のTD要素のリファレンスを取得し、セルの背景と色を設定することに注意してください。作業が終了したら、フォーマットをクリアして通常の状態に戻すことができます。

ます。また、そうのような選択をクリアするonRowClickイベントを使用することができます

：

clearSelection(e: any) { 
 
     let target = e.originalEvent.toElement.closest('div.cell-content'); 
 
     if (target && target.id) { 
 
      let td = target.closest('td'); 
 
      if (td) { 
 
       td.style.backgroundColor = 'white'; 
 
       td.style.color = 'black'; 
 
      } 
 
     } 
 
    }

私はDOMを操作知る直接移動するための方法はありませんが、我々は新しいを得るまでこの機能を含むPrimeNGのバージョンは、これは少なくとも私のためになります。

これを行うには、より良い方法があれば教えてください。