angular项目中的增删改功能

项目中经常用到的增删改查功能（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"><span
                  aria-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-hover
      striped: true,
      locale: 'zh-CN',
      sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
      pagination: true, //是否显示分页（*）  默认false
      paginationHAlign: 'right', //right, left
      paginationVAlign: 'bottom', //bottom, top, both
      paginationDetailHAlign: '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, //默认是1
      pageList: [10, 15, 20, 30],
      //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
      //设置为limit可以获取limit, offset, search, sort, order
      queryParamsType: "undefined", //默认是limit
      undefinedText: '', //返回为空时，页面显示为空
      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;// 其他场所名称 b
    const dzv = itformobj.qtcsdzCtr;//地址
    const qtcstypevuuid = itformobj.qtcstypeCtr;//场所类型uuid   b
    const sipv = itformobj.qtcsSipCtr;// sip
    const 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();
      });
    })
  }