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

First of all, the function buttonFormatter, which you calls inside of onClick have to be global function (the property of the global window object). Seconds, I would recommend you to forward this, which is the clicked td element to clickFunction1 function:

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

and then use $j(this).closest("tr.jqgrow").attr("id") to get the rowid of the clicked row:

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

You will see the results on the demo http://jsfiddle.net/OlegKi/w4oudhh4/12/

Alternatively you can use simplified version of the custom formatter:

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

where no onClick is used. jqGrid register already click event handler on the grid. If the user click on the "Delete" button then the click event handler of the parent outer element will be called because of the event bubbling. jqGrid provides beforeSelectRow callback which will be called inside of click event handler. The target property of the event is <td> element, which is clicked. Thus one can use

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
}

see another 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();

    })

})

Answer 3

完成删除行的完整工作代码：

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

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

JQGRID - 用按钮删除行

3 个答案: