angular引用封装表格显示弹框

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lyj4495673/article/details/82729791

引用表格组件

//将组件引入到自己的模块中
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';
}