¿Cómo creo un botón Eliminar en cada fila usando el complemento SlickGrid?

Question

¿Cómo creo un botón Eliminar en cada fila usando el complemento SlickGrid? Necesito un botón que pueda eliminar toda la fila correspondiente.

Answer 1

Utilice su formateador de columna para hacer esto.

var column = {id:delCol, field:'del', name:'Delete', width:250, formatter:buttonFormatter} 

//Now define your buttonFormatter function 
function buttonFormatter(row,cell,value,columnDef,dataContext){ 
    var button = "<input class='del' type='button' id='"+ dataContext.id +"' />"; 
    //the id is so that you can identify the row when the particular button is clicked 
    return button; 
    //Now the row will display your button 
} 

//Now you can use jquery to hook up your delete button event 
$('.del').live('click', function(){ 
    var me = $(this), id = me.attr('id'); 
    //assuming you have used a dataView to create your grid 
    //also assuming that its variable name is called 'dataView' 
    //use the following code to get the item to be deleted from it 
    dataView.deleteItem(id); 
    //This is possible because in the formatter we have assigned the row id itself as the button id; 
    //now assuming your grid is called 'grid' 
    grid.invalidate();   
}); 

Answer 2

Una alternativa al uso de jQuery para unirse al evento click es usar el evento de clic de SlickGrid. Similar a (ahora obsoleto) jQuery .live() o ahora .on() con controladores delegados, el uso de onClick permitirá que la funcionalidad funcione sin tener que volver a conectar constantemente los controladores cuando se agreguen, eliminen, muestren nuevas filas, etc.

ejemplo

Mejora de Jibi, sustituir el $('.del').live('click', function(){ ... con lo siguiente:

// assuming grid is the var name containing your grid 
grid.onClick.subscribe(function (e, args) { 
    // if the delete column (where field was assigned 'del' in the column definition) 
    if (args.grid.getColumns()[args.cell].field == 'del') { 
     // perform delete 
     // assume delete function uses data field id; simply pass args.row if row number is accepted for delete 
     dataView.deleteItem(args.grid.getDataItem(args.row).id); 
     args.grid.invalidate(); 
    } 
});