SlickGrid 플러그인을 사용하여 모든 행에 삭제 버튼을 만드는 방법은 무엇입니까?

Question

SlickGrid 플러그인을 사용하여 모든 행에 삭제 버튼을 만드는 방법은 무엇입니까? 해당 행 전체를 삭제할 수있는 버튼이 필요합니다.

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

Answer 2

jQuery를 사용하여 click 이벤트에 바인딩하는 대신 SlickGrid의 onClick 이벤트를 사용하는 방법이 있습니다. 위임 된 핸들러를 사용하여 jQuery .live() 또는 nowon()과 유사하게 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(); 
    } 
});