Angular ui-grid 列表中设置开关按钮

一、gridOptions.columnDefs 设置

      {name: 'isEnabled', displayName: '状态', width: 50, enableColumnMenu: false, cellFilter: 'enable',
        cellTemplate: '<div style="padding: 8px" class="icon-center">'
            + '<span id="back-{{row.entity.id}}" ng-class="grid.appScope.homeCareProject.getSwitchBackClass(row.entity)" '
            + 'uib-tooltip="{{grid.appScope.homeCareProject.getSwitchTip(row.entity)}}" '
            + 'tooltip-placement="bottom">'
              + '<span id="front-{{row.entity.id}}" ng-click="grid.appScope.homeCareProject.toggle(row.entity)" '
              + 'ng-class="grid.appScope.homeCareProject.getSwitchFrontClass(row.entity)"></span>'
            + '</span>'
          + '</div>'
      },

二、按钮触发逻辑代码

  getSwitchBackClass(homeCareProject) {
    return homeCareProject.isEnabled === 1 ? "back-open" : "back-close";
  }

  getSwitchFrontClass(homeCareProject) {
    return homeCareProject.isEnabled === 1 ? "front-open" : "front-close";
  }

  getSwitchTip(homeCareProject) {
    return homeCareProject.isEnabled === 1 ? "开启" : "禁用";
  }

  toggle(homeCareProject) {
    let back = document.getElementById("back-" + homeCareProject.id);
    let front = document.getElementById("front-" + homeCareProject.id);
    back.className = (back.className === "back-close") ? "back-open" : "back-close";
    front.className = (front.className === "front-close") ? "front-open" : "front-close";
    this.updateIsEnabled(homeCareProject);
  }

  updateIsEnabled(homeCareProject) {
    let back = document.getElementById("back-" + homeCareProject.id);
    homeCareProject.isEnabled = (back.className === "back-close") ? 0 : 1;
    this.HomeCareService.addOrUpdateHomeCareProject(homeCareProject)
      .then(res => {
          if (res.data.code === "SF0000") {
            this.toastr.success("修改启用状态成功！", "提示信息");
          } else {
            this.toastr.error(res.data.msg, "提示信息");
          }
        }
      )
  }

三、CSS 代码

.back-open {
    width: 24px;
    height: 14px;
    border-radius: 7px;
    position: absolute;
    background: rgba(0,184,0,0.8);
  }
.back-close {
    width: 24px;
    height: 14px;
    border-radius: 7px;
    position: absolute;
    background: rgba(120, 120, 120, 0.1);
    border:1px solid rgba(60, 60, 60, 0.2);
    border-left: transparent;
  }
.front-open {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    position: absolute;
    background: #ffffff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    top: 1px;
    right: 1px;
    outline: none;
  }
.front-close {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    position: absolute;
    background: #ffffff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    top: 0;
    left: 1px;
    border:1px solid rgba(0, 0, 0, 0.2);
    outline: none;
  }

四、效果图