Как создать кнопку удаления в каждой строке с помощью плагина SlickGrid?

Ответ 1

Используйте свой формат столбца, чтобы сделать это.

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

Ответ 2

Альтернативой использованию jQuery для привязки к событию click является использование события onClick для SlickGrid. Подобно (теперь устаревшему) jQuery.live() или now.on() с делегированными обработчиками, использование onClick позволит работать, без необходимости постоянно привязывать обработчики, когда новые строки добавляются, удаляются, отображаются и т.д.

Усовершенствуя пример Jibi, замените $('.del').live('click', function(){... на следующее:

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