Her satırda SlickGrid eklentisini kullanarak nasıl silme düğmesi oluştururum?

Question

Her satırda SlickGrid eklentisini kullanarak nasıl silme düğmesi oluştururum? Tüm ilgili satırı silebilen bir düğmeye ihtiyacım var.

Answer 1

Bunu yapmak için sütun biçimlendiricinizi kullanın.

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

tıklama olayına bağlamak jQuery kullanarak alternatif SlickGrid onClick olayı kullanmaktır. (Artık kullanımdan kaldırılmış) jQuery .live() veya şimdi .on() ile temsilci tarafından işlenenlere benzer şekilde, onClick kullanımı, yeni satırlar eklendiğinde, silindiğinde, gösterildiğinde vb. Işleyicilerin sürekli olarak yeniden bağlanmasına gerek kalmadan işlevselliğin çalışmasına izin verir.

Artırıcı Jibi örneğinin aşağıdaki ile ... $('.del').live('click', function(){ değiştirin:

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