Question

问候，我有一个问题我正在使用SmartAdmin DataTable，我需要在一列中放置三个按钮来编辑，查看和删除我已经将按钮放在一列中的元素，但直到现在我还没有能够让他们回应偶数点击。

谢谢。

enter image description here 这是我在ngOnInit中的代码

this.options = {
          dom: "Bfrtip",
          ajax: (data, callback, settings) => {
              this._usuarioService.readUsuarios()
                  .subscribe((data) => {
                          callback({
                              aaData: data
                          })
                  })
          },
          columns: [
              { data: 'id' },
              { data: 'persona.nombre' },
              { data: 'persona.apellido' },
              { data: 'persona.correo' },
              { data: 'rol.nombre' },
              { data: 'persona.sede.nombre' },
              {defaultContent: '<center><button class=\'btn btn-success btn-xs\'(click)=\'leerUnUsuario(id)\'> Ver </button> ' +
                               '<button class=\'btn btn-info btn-xs\' (click)=\'actualizarUsuario(id)\'> Editar </button> ' +
                               '<button class=\'btn btn-danger btn-xs\' (click)=\'eliminarUsuario(id)\'> Borrar </button></center>' },
          ]
      };

Answer 1

已经解决了，我收到了Alain D'EURVEILHER的帮助，一切都很顺利。

    ngOnInit() {
          this.options = {
              dom: "Bfrtip",
              ajax: (data, callback, settings) => {
                  this._usuarioService.readUsuarios()
                      .subscribe((data) => {
                              callback({
                                  aaData: data
                              })
                      })
              },
              columns: [
                  { data: 'id' },
                  { data: 'persona.nombre' },
                  { data: 'persona.apellido' },
                  { data: 'persona.correo' },
                  { data: 'rol.nombre' },
                  { data: 'persona.sede.nombre' },
                  {
                      render: (data, type, fullRow, meta) => {
                          return `
                              <button class="btn btn-xs btn-success accion-ver-usuario" data-usuario-id="${fullRow.id}">ver</button>
                              <button class="btn btn-xs btn-info accion-editar-usuario" data-usuario-id="${fullRow.id}">editar</button>
                              <button class="btn btn-xs btn-danger accion-borrar-usuario" data-usuario-id="${fullRow.id}">borrar</button>
                          `;
                      }
                  }
              ]
          };

ngAfterViewInit(){
        document.querySelector('body').addEventListener('click', (event)=> {
            let target = <Element>event.target;// Cast EventTarget into an Element
            if (target.tagName.toLowerCase() === 'button' && $(target).hasClass('accion-ver-usuario')) {
                this.verUsuario(target.getAttribute('data-usuario-id'));
            }
            if (target.tagName.toLowerCase() === 'button' && $(target).hasClass('accion-editar-usuario')) {
                this.editarUsuario(target.getAttribute('data-usuario-id'));
            }
            if (target.tagName.toLowerCase() === 'button' && $(target).hasClass('accion-borrar-usuario')) {
                this.borrarUsuario(target.getAttribute('data-usuario-id'));
            }
        });
    }

verUsuario(userId){
        console.log("user displayed:", userId);
    }

    editarUsuario(userId){
        console.log("user edited:", userId);
    }

    borrarUsuario(userId){
        console.log("Delete user", userId, "?");
    }

SmartAdmin DataTable按钮列

1 个答案: