项目中经常用到的增删改查功能（angular6项目）

用到的按钮
<a href="javascript:void(0)" class="btn btn-default" title="添加" (click)="add()"><i class="fa fa-plus"></i> 添加
</a><a href="javascript:void(0)" class="btn btn-default" title="编辑" (click)="edite()"><i class="fa fa-pencil"></i> 编辑
</a>
<a href="javascript:void(0)" class="btn btn-default" title="删除" (click)="remove()"><i class="fa fa-bank"></i> 删除
</a>
<a href="javascript:void(0)" class="btn btn-default" title="刷新" (click)="refresh_table()"><i class="fa fa-refresh"></i> 刷新
</a>

modal弹框（增加和编辑功能共用一个弹框，这里还用到了angular的响应式表格（自己查））
<div class="modal fad" id="mymodal" tabindex="-1" role="dialog"aria-labelledby="myModalLabel1"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><spanaria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel1">{{modaltitle}}</h4></div><div class="modal-body"><form class="form-horizontal" role="form" [formGroup]="itFormGroup"><div class="row"><div class="col-lg-12"><div class="form-group"><label class="col-lg-3 control-label" for="qtcsname">场所名称：</label><div class="col-lg-8"><input type="text" id="qtcsname" placeholder="场所名称" class="form-control"formControlName="qtcsnameCtr" required/><div *ngIf="itFormGroup.get('qtcsnameCtr').invalid&&itFormGroup.get('qtcsnameCtr').dirty"><span class="help-block text-danger" *ngIf="itFormGroup.hasError('required','qtcsnameCtr')">场所名称不能为空</span></div></div></div></div></div><div class="row"><div class="col-lg-12"><div class="form-group"><label class="col-lg-3 control-label" for="qtcstype">场所类型：</label><div class="col-lg-8"><select class="form-control" id="qtcstype" formControlName="qtcstypeCtr" required></select><div *ngIf="itFormGroup.get('qtcstypeCtr').invalid&&itFormGroup.get('qtcstypeCtr').dirty"><span class="help-block text-danger" *ngIf="itFormGroup.hasError('snone','qtcstypeCtr')">{{itFormGroup.getError('snone', 'qtcstypeCtr').msg}}</span></div></div></div></div></div><div class="row"><div class="col-lg-12"><div class="form-group"><label class="col-lg-3 control-label" for="qtcsdz">场所地址：</label><div class="col-lg-8"><input type="text" id="qtcsdz" placeholder="场所地址" class="form-control"formControlName="qtcsdzCtr"/></div></div></div></div><div class="row"><div class="col-lg-12"><div class="form-group"><label class="col-lg-3 control-label" for="qtcsSip">Sip：</label><div class="col-lg-8"><input type="text" id="qtcsSip" placeholder="Sip地址" class="form-control"formControlName="qtcsSipCtr"/></div></div></div></div><div class="row"><div class="col-lg-12"><div class="form-group"><label class="col-lg-3 control-label" for="qtcsremark">备注：</label><div class="col-lg-8"><input type="text" id="qtcsremark" class="form-control" placeholder="备注"formControlName="qtcsremarkCtr"/></div></div></div></div></form></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取 消</button><button type="button" class="btn btn-primary" [disabled]="itFormGroup.status=='INVALID'"(click)="sure()">确定</button></div></div></div></div>

这里用到的表格插件是bootstrap-table
html代码只需要一句
<table id="table"></table>
js代码：

表格的js代码

inittable(): void {const that = this;$('#table').bootstrapTable({classes: 'table  table-bordered', //没有 border,默认是 table table-hoverstriped: true,locale: 'zh-CN',sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）pagination: true, //是否显示分页（*）  默认falsepaginationHAlign: 'right', //right, leftpaginationVAlign: 'bottom', //bottom, top, bothpaginationDetailHAlign: 'left', //right, left//paginationPreText: '上一页', //默认是‹//paginationNextText: '下一页', //默认是›search: false,url: '后端接口（我这里就不写了，url也可以写成data：data（此时data为数据））', // 后台返回必须包含，总记录数total(必须是总的)及分页后数据rows。method: 'post',//如果发送的是post请求，因为bootstap table使用的是ajax方式获取数据，这时会将请求的content type默认设置为 text/plain，这样在服务端直接通过 @RequestParam参数映射是获取不到的。contentType: 'application/x-www-form-urlencoded;utf-8',dataType: "json",ajaxOptions: {headers: {"User-Token": that.commservice.getToken(),}},pageSize: 10, //每页的个数pageNumber: 1, //默认是1pageList: [10, 15, 20, 30],//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder//设置为limit可以获取limit, offset, search, sort, orderqueryParamsType: "undefined", //默认是limitundefinedText: '', //返回为空时，页面显示为空queryParams: queryParams,//showColumns: true, // 默认false显示下拉框勾选要显示的列// clickToSelect: true, //是否启用点击选中行//表格的高度height: "100%",columns: [{checkbox: true,}, {title: "场所编号",field: "csbh",cellStyle: function () {return {classes: 'tdone'}},}, {title: "场所名称",field: "name",cellStyle: function () {return {classes: 'tdtwo'}},}, {title: "地址",field: "dz",cellStyle: function () {return {classes: 'tdthree'}},}, {title: "SIP",field: "sip",cellStyle: function () {return {classes: 'tdfour'}}}, {title: "备注",field: "remark",cellStyle: function () {return {classes: 'tdone'}},}],onLoadSuccess: function (resp) {}});function queryParams(params) {return {pageSize: params.pageSize,pageNumber: params.pageNumber,name: that.s_qtcsname,csbh: that.s_qtcsbh,lxUuid: that.s_cstype ? that.s_cstype : ""}};}

新增功能：
点击添加功能时，弹框出现

add(): void {this.modaltitle = "添加其他场所";this.modalflag = "add";$("#mymodal").modal({keyboard: false,backdrop: false});this.itFormGroup.reset({qtcstypeCtr: "",});$("#qtcstype").selectpicker("refresh");}

编辑功能：
这里用到了SweetAlert插件

edite(): void {const selectrow = $("#table").bootstrapTable("getSelections");if (selectrow.length != 1) {swal({title: "请选择一条需要编辑的数据",type: "warning",confirmButtonText: "确定"});return;}const selectrowobj = selectrow[0];this.modalflag = "edite";this.modaltitle = "编辑其他场所";$("#mymodal").modal({keyboard: false,backdrop: false});this.itFormGroup.patchValue({qtcsnameCtr: selectrowobj.name,qtcsdzCtr: selectrowobj.dz ? selectrowobj.dz : "",qtcstypeCtr: selectrowobj.lxUuid,qtcsSipCtr: selectrowobj.sip ? selectrowobj.sip : "",qtcsremarkCtr: selectrowobj.remark ? selectrowobj.remark : ""});$("#qtcstype").selectpicker("refresh");this.editeuuid = selectrowobj.uuid;this.editebh = selectrowobj.csbh;}

添加和编辑弹框的确认功能：

 sure(): void {const flag = this.modalflag;const itformobj = this.itFormGroup.value;const namev = itformobj.qtcsnameCtr;// 其他场所名称 bconst dzv = itformobj.qtcsdzCtr;//地址const qtcstypevuuid = itformobj.qtcstypeCtr;//场所类型uuid   bconst sipv = itformobj.qtcsSipCtr;// sipconst remarkv = itformobj.qtcsremarkCtr;//备注if (flag == "add") {this.itservice.addqtCs({token: this.commservice.getToken(),name: namev,dz: dzv ? dzv : "",lxUuid: qtcstypevuuid,sip: sipv ? sipv : "",remark: remarkv ? remarkv : "",sectorUuid: this.sectoruuid}).subscribe(resp => {const retflag = resp.result;if (retflag == "success") {swal({title: "添加成功",confirmButtonText: "确定"});$("#mymodal").modal("hide");this.refresh_table();}})} else if (flag == "edite") {this.itservice.editeKslb({token: this.commservice.getToken(),uuid: this.editeuuid,csbh: this.editebh,name: namev,dz: dzv ? dzv : "",lxUuid: qtcstypevuuid,sip: sipv ? sipv : "",remark: remarkv ? remarkv : "",sectorUuid: this.sectoruuid}).subscribe(resp => {const retflag = resp.result;if (retflag == "success") {swal({title: "编辑成功",confirmButtonText: "确定"});$("#mymodal").modal("hide");this.refresh_table();}});}}

删除功能：

remove(): void {const selectrow = $("#table").bootstrapTable("getSelections");const that = this;if (!selectrow.length) {swal({title: "请选择删除的数据",type: "warning",confirmButtonText: "确定"});return;}swal({title: "确定删除？",type: "warning",confirmButtonText: "确定",showCancelButton: true,cancelButtonText: "取消",closeOnConfirm: false,showLoaderOnConfirm: true,}, function () {const delarr = [];selectrow.forEach(function (item, index, array) {delarr.push(item.uuid);});that.itservice.removeqtcs({token: that.commservice.getToken(),uuids: delarr}).subscribe(resp => {const retflag = resp.result;if (retflag == "success") {swal({title: "删除成功!",confirmButtonText: "确定",});}that.refresh_table();});})}