JQGRID - Удалить строку с помощью кнопки

Question

Как удалить строку в JQGrid с кнопкой

http://jsfiddle.net/chandelyt/w4oudhh4/3/

HTML

<table id="list2"> 
    <tr> 
     <td /> 
    </tr> 
</table> 
<div id="jQGridDemoPager"></div> 

JQuery

var $j = $.noConflict(true); 
var mydata = [ 
    { "UserName": "8125579231", "RoleId": 1, "Name": "John", "RoleName": "Administrator" }, 
    { "UserName": "9676078986", "RoleId": 1, "Name": "Mia", "RoleName": "Administrator" }, 
    { "UserName": "9703804807", "RoleId": 1, "Name": "Shan", "RoleName": "Administrator" }, 
    { "UserName": "9177458358", "RoleId": 1, "Name": "Tim", "RoleName": "Administrator" }, 
    { "UserName": "7760699118", "RoleId": 2, "Name": "Harry", "RoleName": "Sales" } 
]; 


$j('#list2').jqGrid({ 
    caption: "Employee Details", 
    data: mydata, 
    datatype: "local", 
    colNames: ["UserName", "RoleId", "Name", "RoleName","Delete"], 
    colModel: [ 
    { name: "UserName", index: 'UserName', width: 150 }, 
    { name: 'RoleId', index: "RoleId", width: 150 }, 
    { name: "Name", index: "Name", width: 150 }, 
    { name: "RoleName", index: "RoleName", width: 150 }, 
    { name: 'Delete', formatter: buttonFormatter } 
    ], 
    rowNum: 10, 
    pager: '#jQGridDemoPager', 
    sortname: "UserName", 
    viewrecords: true, 
    sortorder: "desc", 
}); 


function buttonFormatter(cellvalue, options, rowObject) { 
    return '<button type="button" onClick=clickFunction1();>Delete</button>'; 
}; 

function clickFunction1() { 

    var grid = $j('#list2'); 
    var sel_id = grid.jqGrid('getGridParam', 'selrow'); 
    var myCellData = grid.jqGrid('getCell', sel_id, 'Name'); 
    alert("Selected Name: " + myCellData); 

}; 

CSS

.ui-jqgrid .ui-state-highlight { background: silver; } 

Проблема, как показано ниже: Когда я нажмите кнопку Удалить (без выбора строки) она показывает, ранее выбранное значение строк (Имя в данном случае)

Я хочу, чтобы нажать на любую кнопку (и он должен выбрать эту строку - или нет) и получить значение своих полей. Я отправляю на сервер для удаления, а затем обновляю сетку после удаления элемента.

Это работает, если выбрать строку, а затем нажмите кнопку ... Работа моей локальной копии, а не на скрипке ... может быть еще потому старой версии fiddeler

Answer 1

Прежде всего, функция buttonFormatter, ш которые вы вызываете внутри onClick, должны быть global function (свойство глобального объекта window). Секунды, я бы порекомендовал вам переслать this, который является щелкнул td элемент clickFunction1 функции:

function buttonFormatter() { 
    return '<button type="button" onClick="clickFunction1.call(this)">Delete</button>'; 
} 

, а затем использовать $j(this).closest("tr.jqgrow").attr("id"), чтобы получить rowid из щелкнули строки:

function clickFunction1() { 
    var grid = $j('#list2'), rowid = $j(this).closest("tr.jqgrow").attr("id"); 
    var myCellData = grid.jqGrid('getCell', rowid, 'Name'); 
    alert("Selected Name: " + myCellData); 
} 

Вы увидите результаты на демо http://jsfiddle.net/OlegKi/w4oudhh4/12/

В качестве альтернативы вы можете использовать упрощенную версию пользовательского форматирования:

function buttonFormatter() { 
    return '<button type="button">Delete</button>'; 
} 

где неonClick не используется. jqGrid register уже click обработчик событий в сетке. Если пользователь нажмет на кнопку "Delete", тогда будет вызван обработчик события click родительского элемента . jqGrid предоставляет beforeSelectRow callback, который будет вызываться внутри обработчика события click. Объект target события <td> элемент, который нажал.Таким образом, можно использовать

beforeSelectRow: function (rowid, e) { 
    var grid = $j(this), rowid = $j(e.target).closest("tr.jqgrow").attr("id"); 
    var myCellData = grid.jqGrid('getCell', rowid, 'Name'); 
    alert("Selected Name: " + myCellData); 
    return true; // allows selection of the row 
} 

увидеть другой Demo http://jsfiddle.net/OlegKi/w4oudhh4/13/

Answer 2

Добавить class кнопку Удалить и удалить onClick=clickFunction1(); так:

return '<button class="dlt" type="button">Delete</button>'; 

И JQuery, как это:

$(document).ready(function(){ 

    $(".dlt").on("click",function(){ 

     $(this).closest("tr").remove(); 

    }) 

})