引用表格元件

//將元件引入到自己的模組中
import { DataTableModule } from 'ng-itoo-datatable;
imports: [
    DataTableModule,
  ],

• HTML頁面

<div class="un-grouped" style="display: true" id="ungrouped" >
    <data-table [isLink]="isLink" [buttonList]="btnList" [title]="title" [page]="page" [deleteButton]="btnDelete"
 
 [addButton]="btnAdd"
        [editButton]="btnEdit" [ButtonHeaders]="btngrouped" [exportButton] = "btnExport" [total]="total" [data]="data" [arr]="arrbutes" [buttonstyle]="btnstyle" [sizeList]="sizeList"
        [paging]="paging" [page]="page" [pageSize]="pageSize" (addOpen)="addPaper($event)"  (coustomData)="groupPaper(addModal)"
 
 (btngrouped)="groupOpen($event,addModal)"
        (changepage)="changepage($event)" (exportEmit)="export()" (linkClickEmitData)="previewPaper($event)" (operat)="operatData($event,modal,uploadmodal)" (deletesEmit)="deleteDatas($event)">         
    </data-table>
</div> 

• 彈框頁面

<!-- 一鍵分組操作 -->
 

<div #addModal class="modal-dialog" style="visibility:hidden;position:absolute;left:30%;top:20% " id="grouped-dialog">
   <form role="form" class="form-horizontal" #siteForm="ngForm" (ngSubmit)="add(modal)">
      <div class="modal-content">
         <div class="modal-header" itoo-drag>
           <button type="button" class="close" (click)="closeEidt(addModal)">×</button>
              <h4 class="modal-title">
                設定分組人數
              </h4>
           </div>

            <div class="modal-body">
              <div class="form-group">
                <label class="col-sm-3 control-label">人數：</label>
                <div class="col-sm-9">                     
                  <input type="text" [(ngModel)]="groupNum" class="form-control" id="institutionName" required maxlength="20" placeholder="請輸入分組人數（建議不要超過30人）"  name="institutionName">                                
                </div>
              </div>             
            </div>

            <div class="modal-footer">          
              <button type="submit" [disabled]="!siteForm.form.valid" class="btn btn-primary" (click)="btnOk(grouped)"  >確認</button>            
              <button type="button" class="btn btn-default" (click)="closeEidt(addModal)">取消</button>
           </div>
       </div>
   </form>

• 設定按鈕點選事件

//HTML頁面
(btngrouped)="groupOpen($event,addModal)"
//先設定頁面隱藏，根據後面的事件繫結彈框頁面
<div #addModal class="modal-dialog" style="visibility:hidden;position:absolute;left:30%;top:20% " id="grouped-dialog">

//ts
//點選按鈕顯示設定分組彈框
 groupOpen(groupModal: HTMLElement){
  groupModal.style.visibility='visible';
 }

• 關閉彈框

closeEidt(el: HTMLElement) {
  el.style.visibility = 'hidden';
}