Как создать кнопку "Удалить" в каждой строке с помощью плагина SlickGrid?
Как создать кнопку "Удалить" в каждой строке с помощью плагина SlickGrid? Мне нужна кнопка, которая может удалить всю соответствующую строку.
2 ответов
используйте форматер столбцов, чтобы сделать это.
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();
});
альтернативой использованию jQuery для привязки к событию click является использование события onClick SlickGrid. Похожие на (Теперь устаревший) на jQuery .жить() или сейчас .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();
}
});