的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; }

問題如下：當我點擊刪除按鈕（不選擇行）這表明先前選定的行值（在這種情況下，名稱）

我想點擊任何按鈕（和它應該選擇該行 - 或不），並獲取其字段值..我發佈到服務器刪除，然後刷新網格，一旦項目被刪除。

它工作，如果我選擇一行，然後單擊按鈕...我的工作的本地副本，但不能在小提琴......可能是becasue的舊版本的fiddeler

來源

2016-08-31 Harry S

首先，功能buttonFormatter，W你在onClick裏面打電話必須是global函數（全局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已經在網格上註冊了click事件處理程序。如果用戶點擊"Delete"按鈕，則由於event bubbling將調用父外部元素的click事件處理程序。 jqGrid提供的beforeSelectRow回調函數將在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 
}

看到另一個演示http://jsfiddle.net/OlegKi/w4oudhh4/13/

來源

2016-08-31 17:02:17 Oleg

大。看起來不錯 –

添加class刪除按鈕和刪除onClick=clickFunction1();這樣的：

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

和jQuery這樣的：

$(document).ready(function(){ 

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

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

    }) 

})

來源

2016-08-31 16:42:53 Ehsan

的jqGrid - 刪除一行按鈕

回答

相關問題