jqgrid EditActionIconsColumn 事件

Question

我在网格中有一个 jqgrid，其中包含 EditActionsIconsColumn，但我试图获取“编辑”、“删除”和“提交”上的单击事件。 谢谢

Answer 1

formatter:'actions' 尚未得到很好的记录。当前版本的 jqGrid 3.8.2 支持您需要的一些选项。在jquery的第394-466行中。当前版本的fmatter.js 你可以看到更多。

您需要的是 onEdit、afterSave（在“Submit”上）和 delOptions.onclickSubmit 参数。

说实话，我以前没有使用过“actions”格式化程序，为了理解它，我自己写了 演示也可以解决您的所有问题。为了让其他人更容易找到示例，请在此处包含代码的最重要部分：

var grid = $("#list");
grid.jqGrid({
    datatype: "local",
    data: mydata,           // init local data which will be edited
    editurl: 'clientArray', // we will use local editing
    colNames:['Actions', ... ],
    colModel:[
        {name:'act',index:'act',width:55,align:'center',sortable:false,formatter:'actions',
         formatoptions:{
             keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
             onEdit:function(rowid) {
                 alert("in onEdit: rowid="+rowid+"\nWe don't need return anything");
             },
             onSuccess:function(jqXHR) {
                 // the function will be used as "succesfunc" parameter of editRow function
                 // (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow)
                 alert("in onSuccess used only for remote editing:"+
                       "\nresponseText="+jqXHR.responseText+
                       "\n\nWe can verify the server response and return false in case of"+
                       " error response. return true confirm that the response is successful");
                 // we can verify the server response and interpret it do as an error
                 // in the case we should return false. In the case onError will be called
                 return true;
             },
             onError:function(rowid, jqXHR, textStatus) {
                 // the function will be used as "errorfunc" parameter of editRow function
                 // (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow)
                 // and saveRow function
                 // (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow)
                 alert("in onError used only for remote editing:"+
                       "\nresponseText="+jqXHR.responseText+
                       "\nstatus="+jqXHR.status+
                       "\nstatusText"+jqXHR.statusText+
                       "\n\nWe don't need return anything");
             },
             afterSave:function(rowid) {
                 alert("in afterSave (Submit): rowid="+rowid+"\nWe don't need return anything");
             },
             afterRestore:function(rowid) {
                 alert("in afterRestore (Cancel): rowid="+rowid+"\nWe don't need return anything");
             },
             delOptions: {
                 // because I use "local" data I don't want to send the changes to the server
                 // so I use "processing:true" setting and delete the row manually in onclickSubmit
                 onclickSubmit: function(rp_ge, rowid) {
                     // we can use onclickSubmit function as "onclick" on "Delete" button
                     alert("The row with rowid="+rowid+" will be deleted");

                     // reset processing which could be modified
                     rp_ge.processing = true;

                     // delete row
                     grid.delRowData(rowid);
                     $("#delmod"+grid[0].id).hide();

                     if (grid[0].p.lastpage > 1) {
                         // reload grid to make the row from the next page visable.
                         // TODO: deleting the last row from the last page which number is higher as 1
                         grid.trigger("reloadGrid", [{page:grid[0].p.page}]);
                     }

                     return true;
                 },
                 processing:true // !!! the most important step for the "local" editing
                                 //     skip ajax request to the server
             }
         }},
        ...
    ],
    ...
});