JQGRID - 使用按钮删除行答案

【问题标题】：JQGRID - Delete the row with buttonJQGRID - 使用按钮删除行
【发布时间】：2017-01-08 08:17:29
【问题描述】：

如何使用按钮删除 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; }

问题如下：当我单击删除按钮（不选择行）时，它会显示先前选择的行值（在这种情况下为名称）

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

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

【问题讨论】：

标签： javascript jquery html jqgrid

【解决方案1】：

首先，您在onClick 内部调用的函数buttonFormatter 必须是全局函数（全局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" 按钮，则将调用 parent outer 元素的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/

【讨论】：

【解决方案2】：

删除行的完整工作代码：

http://jsfiddle.net/w4oudhh4/159/

function clickFunction1() {
     $('#list2').trigger( 'reloadGrid' );
}

【讨论】：

【解决方案3】：

将class 添加到删除按钮并删除onClick=clickFunction1();，如下所示：

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

还有像这样的 jQuery：

$(document).ready(function(){

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

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

    })

})

【讨论】：