SmartAdmin DataTable 按钮列
SmartAdmin DataTable Button Column
此致,我在使用 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>' },
]
};
已经解决,我得到了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 时遇到问题,我需要将三个按钮放在一个列中以编辑、查看和删除一个元素我已经将按钮放在一个列中,但直到现在我还有无法让他们响应甚至点击。
谢谢。
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>' },
]
};
已经解决,我得到了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, "?");
}