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

Question

您好，我有以下 jqgrid 列，单击批准按钮我需要通过 ajax 向 servlet 发送一个 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。不知道如何实现它。 非常感谢任何帮助。

谢谢

Answer 1

首先，重要的是要了解 jqGrid 总是 分配代表网格行的 <tr> 元素的 id 属性。如果你使用 "Id":1016 而不是 "id":1016 你应该通知 jqGrid 为 id 使用另一个名称。您可以包括 jsonReader: {id: "Id"} 来执行此操作。只是因为 jqGrid 没有在输入数据中找到所需的信息，它会将 1、2、3... 等整数分配为 id 值。

下一个问题是setRowData 在loadComplete 内部的循环中的使用。我建议您阅读the old answer，我试图从性能的角度解释为什么该方法无效。使用custom formatter 来构造option 列的内容会好很多。如果您需要定义 jqGrid 在需要构建<td> 的内容时调用的回调函数（option 列的单元格）。回调有四个参数cellvalue、options、rowObject、action。第二个参数options 是rowId 属性(options.rowId) 为您提供行ID 的对象。第三个参数rowObject 表示该行的输入数据。我认为在您的情况下它将类似于{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 的情况下，可以使用 old id 值。使用approveLeave(this) 会更好。 this 的值是被点击的<input> 元素的DOM。所以可以使用$(elem).closest("tr").attr("id")（elem可以是approveLeave的第一个参数）来获取rowid。

更好的方法是根本不分配任何onclick。可以在代表网格的整个<table> 上设置一个 click 事件句柄。 jqGrid 这样做。所以可以使用beforeSelectRow 或onSelectRow 来处理网格内任何按钮上的click。请参阅the answer、this one 或 this one。