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

问题如下: 当我单击删除按钮(不选择行)时，它会显示以前选择的行值(在本例中为名称)

我想单击任何按钮(它应该选择该行 - 或不选择)并获取其字段值..我将其发布到服务器以进行删除，然后在删除项目后刷新网格。

如果我选择一行然后单击按钮，它就可以工作...工作我的本地副本但不能在 fiddle 上...可能是因为旧版本的 fiddler

Answer 1

首先，函数buttonFormatter ，您在 onClick 内调用它必须是全局函数(全局 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"按钮，然后是 click由于 event bubbling 将调用父外部元素的事件处理程序。 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/