版权声明:本文为博主原创文章,未经博主允许不得转载。 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';
}