Come posso creare un pulsante Elimina su ogni riga usando il plugin SlickGrid?

Question

Come si crea un pulsante di eliminazione su ogni riga utilizzando il plug-in SlickGrid? Ho bisogno di un pulsante che possa cancellare l'intera riga corrispondente.

Answer 1

Usa il tuo formattatore di colonne per fare questo.

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

Un'alternativa all'utilizzo di jQuery per legare l'evento click è quello di utilizzare l'evento onClick di SlickGrid. Simile a (ora deprecato) jQuery .live() o ora .on() con gestori delegati, l'uso di onClick consentirà alla funzionalità di funzionare senza dover ricollegare costantemente i gestori quando vengono aggiunte, eliminate, visualizzate, nuove righe

esempio

Enhancing di Jibi, sostituire il $('.del').live('click', function(){ ... con il seguente:

// 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(); 
    } 
});