单击在JqGrid行上创建的自定义按钮获取json参数

时间:2013-08-18 13:30:10

标签: java jquery jqgrid

您好我有以下jqgrid列,onclick on approve按钮我需要向servlet thro ajax发送一个ID。

colNames: ['EmployeeID','Name', 'From Date', 'To Date', 'Reason', ''],
    colModel: [
           {name:'employeeID', index:'emp_Id', width:55 },
           {name: 'employeeName', index:'name', width:90},
           {name: 'leave_from', index:'from_date', width: 90},
           {name: 'leave_to', index:'to_date', width: 90},
           {name: 'reason', index:'status', width: 90},
           {name: 'option', index: 'option', width:150, sortable:false},
               ],

自定义按键代码

    loadComplete: function(){
        //alert('loading Complete');
        var id = jQuery('#jqqGrid').getDataIDs();
        for(var i=0; i<id.length; i++){
            //var c1 = id[i];
            approve = "<input style='height:22px;width:60px;' type='button' onclick= \"approveLeave();\" Value='Approve'/><br />";
            reject = "<input style='height:22px;width:60px;' type='button' onclick= \"rejectLeave();\" Value='Reject'/><br />";
            jQuery('#jqqGrid').jqGrid('setRowData',id[i], {option:approve+reject});
        }

我能够看到网格中的按钮,我的问题是通过onclick函数发送ID,

示例Json对象

{"currentPage":1,"totalPages":1,"totalRecords":1,"rows":[{"Id":1016,"cell":{"leave_from":"19/08/2013","leave_to":"23/08/2013","dateofLeaveRequest":"8/18/2013","reason":"Vaccation ","leave_id":1016,"id":0,"employeeID":1029,"employeeName":"Arun Kumar"}}]}

我想通过我的onclick函数传递ID。不知道如何实现它。 任何帮助都非常感谢。

谢谢

1 个答案:

答案 0 :(得分:2)

首先,了解jqGrid 始终分配id元素的<tr>属性非常重要,"Id":1016元素表示网格行。如果您使用"id":1016而不是jsonReader: {id: "Id"},则应通知jqGrid使用其他名称进行ID。您可以包含setRowData来执行此操作。只是因为jqGrid在输入数据中找不到所需的信息,所以它会将整数分配为1,2,3 ......作为id值。

下一个问题是在loadComplete内的循环中使用option。我建议你阅读the old answer,我试图从性能的角度解释为什么这种方法无效。使用custom formatter构建<td>列的内容会更好。在这种情况下,您需要定义jqGrid在需要构建option(列cellvalue的单元格)内容时调用的回调函数。回调有四个参数optionsrowObjectactionoptions。第二个参数rowIdoptions.rowId属性(rowObject)为您提供行的ID的对象。第三个参数{leave_from: "19/08/2013", leave_to: "23/08/2013", dateofLeaveRequest: "8/18/2013", reason: "Vaccation", leave_id: 1016, id: 0, employeeID: 1029, employeeName: "Arun Kumar"}表示该行的输入数据。我认为在你的情况下它会像rowObject.leave_id。在这种方式中,您将能够根据行的输入数据的任何值构造单元格内容。因此options.rowId'onclick=\"approveLeave(' + options.rowId + ')'会为您提供所需的信息。

如果您实施某些数据编辑,onclick的使用可能会有一些缺点。在approveLeave(this)可以使用 id值的情况下。使用this会更好。 <input>的值是单击的$(elem).closest("tr").attr("id")元素的DOM。因此,您可以使用elemapproveLeave可能是onclick的第一个参数)来获取rowid。

更好的方法是根本不指定任何click 。可以在代表网格的整个<table>上设置一个 beforeSelectRow事件句柄。 jqGrid这样做。因此,可以使用onSelectRowclick来处理网格内任何按钮上的{{1}}。请参阅the answerthis onethis one