如何使用 SlickGrid 插件在每一行上创建一个删除按钮？

Posted 2023-02-22

【中文标题】如何使用 SlickGrid 插件在每一行上创建一个删除按钮？

【英文标题】：How do i create a delete button on every row using the SlickGrid plugin?

【发布时间】：2012-04-04 18:40:48

【问题描述】：

我需要一个可以删除整个对应行的按钮。

【问题讨论】：

在提问时，如果您提供一些您尝试过的代码，通常会得到更多的回应和更好的帮助，然后人们可以帮助您找出问题所在。

【参考方案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 事件的另一种方法是使用 SlickGrid 的 onClick 事件。类似于（现已弃用）jQuery .live() 或现在 .on() 与委托处理程序，使用 onClick 将允许功能工作，而无需在添加、删除、显示新行等时不断重新附加处理程序。

增强吉比的例子，将$('.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();
    
);

【讨论】：

我会稍微改进一下这种方法。如果您在此列中有一个按钮，您将收到它的事件对象。因此，您可以检测用户是单击了表空间还是单击了您的按钮。