チェックボックスを使用してng2-smart-tableコンポーネントで複数の行を選択するにはどうすればよいですか?



How Select Multiple Rows Ng2 Smart Table Component With Checkbox



解決:

1-複数の行を選択して1つの関数を呼び出したいので、このコードをng2-smart-tableのどこに記述する必要がありますか?

答え:



で複数の行を選択する場合ng2-smart-table、構成を追加する必要があります設定オブジェクト。

例:



settings = {//この `selectMode`は、チェックボックスselectMode: 'multi'、delete:{confirmDelete:true、deleteButtonContent: 'Delete data'、saveButtonContent: 'save'、cancelButtonContent: 'を使用してテーブル内の複数の行を選択するための構成です。キャンセル '}、追加:{confirmCreate:true、}、編集:{confirmSave:true、}、列:{//列構成}、};

2-複数の行を選択して、選択した行で1つの関数を呼び出すことはできますか?

ng2-smart-tableには取得するイベントがありますuserSelectedRowsの場合、そのイベントを使用して選択したすべての行を取得し、関数を呼び出して選択したすべての行に対して何かを実行できます。

例:



  • ステップ1:テンプレートにイベントハンドラーを追加する
  
  • ステップ2:でイベントハンドラーを作成するcomponent.tsを使用して、選択した行を取得します
onUserRowSelect(event){this.selectedRows = event.selected; }
  • ステップ3:ボタンを作成し、関数を呼び出して、選択した行で何かを実行します

ボタンインhtml

選択される

ハンドラーをクリックしますcomponent.ts

onClick(){//選択したすべての行をコンソールしますconsole.log(this.selectedRows); }

ここでは、これが機能していることを確認できます:https://stackblitz.com/edit/example-ng2-smart-table-18qsws


私はこのライブラリにあまり精通していませんが、次のことが役立つはずです。

html

ログすべて選択済み

NS

selectedRows = []; rowSelectedHandler(rowData:{isSelected:boolean、data:any}){if(rowData.isSelected === false){/ *行を削除* / this.selectedRows = this.selectedRows.filter((rowItem)=> rowItem .id !== rowData.data.id)} else {/ *行を追加* / this.selectedRows = [... this.selectedRows、... rowData.data]; console.log( '行データを追加'); }} logAllSelectedRows(){console.log(this.selectedRows); } 

ng2-smart-tableで 設定 (([settings] = 'settings')、次の行を追加して、複数の行を選択できるようにします。

selectMode: 'multi'、

次に、あなたの レンプレート 、(userRowSelect)イベントをng2-smart-tableに追加します。

  

あなたの中で 成分 、(userRowSelect)ごとに選択された行のリストを更新します。

private selectedRows:any; // ... onUserRowSelect(event){this.selectedRows = event.selected; }

引き続きコンポーネントに、選択した行で必要な処理を実行する関数を追加します。

public doSomething(){// `this.selectedRows`で何かをする}

ボタンを追加し、クリックされたら関数を呼び出します。

選択した行でコードを実行してください!