events - 本地删除 jqgrid 后触发事件

Question

所以我想做的是在 jqgrid 上完成本地删除后触发一个事件。这样做的原因是因为我正在网站上处理全局保存，所以我不会直接发布到服务器。我将数据以 JSON 形式存储在页面上的隐藏元素中，因此当用户最终保存元素值时，会抓取元素值并将其与所有其他数据一起发送到服务器。

我遇到的问题是，当我从 jqgrid 中删除一行时，我无法通过更改更新隐藏元素，因此如果用户在此之后保存，就好像删除从未发生过。

      $("#translationMappingGrid").jqGrid({
    data: mydata, 
    datatype: "local", 
    mtype: 'GET',
    colNames:['From','To', 'Type'],
    colModel :[ 
        {name:'from',index:'from', width:180, align:"left",sorttype:"float", editable: true, editrules:{custom:true, custom_func:validateIPGridInput}}, 
        {name:'to',index:'to', width:180, align:"left",sorttype:"float", editable: true, editrules:{custom:true, custom_func:validateIPGridInput}}, 
        {name:'type',index:'type', width:200,align:"left",sorttype:"float", editable: true, 
            edittype:"select", formatter:'select', editoptions:{
                value:"0:Never Translate;1:Always Translate;2:Only If Source;3:Only If Destination"}
        }, 
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'Mapping',
    editurl: 'probe.sysinfo.ajax',
    url:'clientArray',
    onSelectRow: function(id){ 
            jQuery('#translationMappingGrid').jqGrid('restoreRow',lastsel2); 
            //below are the parameters for edit row, the function is called after a successful edit has been done
            //jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
            jQuery('#translationMappingGrid').jqGrid('editRow',id,true,"","","","",function () {
                setTranslationMappingJSON(getGridDataJSONString(this));
                window.parent.document.getElementById('notificationDiv').style.display= "";
                }); 

            lastsel2=id; 
    },
    afterInsertRow: function(rowid, rowdata, rowelem ){
        //alert("after insert row");
        setTranslationMappingJSON(getGridDataJSONString(this));
        window.parent.document.getElementById('notificationDiv').style.display= "";
    }


  });

  //adds buttons to jqgrid nav bar
  jQuery("#translationMappingGrid").navGrid('#pager',{
        edit:false,add:true,del:true,search:false,refresh:true
        }, {
            closeAfterAdd:true,
            closeAfterEdit: true
        },
        {
            closeAfterAdd:true,
            closeAfterEdit: true,
            afterSubmit: function(response, postdata) {
                alert("after complete row");
                setTranslationMappingJSON(getGridDataJSONString(this));
                window.parent.document.getElementById('notificationDiv').style.display= "";
                return [true,""];
            }
        });

如上面的代码所示，我通过 afterrestorefunc 成功更新了隐藏元素，并通过添加和编辑(内联)进行了更改，但这不适用于删除。

我尝试在上面的代码中使用 afterSubmit，但这也不起作用。我已经为此工作了几天，并得出结论，我可能必须完全为删除按钮编写自己的自定义代码，但我希望情况并非如此。

Answer 1

OP 在编辑中写道:

So it appears as though I was staring at the issue for too long and was missing the obvious....lucky me. I found out two things:

1. Using afterSubmit was the wrong thing to use, instead I should be using afterComplete.

2. I had tried using afterComplete before trying afterSubmit and the reason it was not working it because I am putting them both within the "add" parameters and NOT the delete. Once again, I feel pretty awesome for that one :)

Well now that I have figured that out here is the code snippet that saved my life:

    jQuery("#translationMappingGrid").navGrid('#pager',{
    edit:false,add:true,del:true,search:false,refresh:true
    }, {
        closeAfterAdd:true,
        closeAfterEdit: true
    },
    {
        closeAfterAdd:true,
        closeAfterEdit: true
    },{
        afterComplete:
            function () {
                //saves the changed JSON string to the hidden element
                setTranslationMappingJSON(getGridDataJSONString(jQuery('#translationMappingGrid')));
                window.parent.document.getElementById('notificationDiv').style.display= "";
            }                       
    });

This is tested and the function is called after the delete has been performed and saves the local changes to my hidden element.

For anyone who is curious about what the format is:

          /* The following is the setup 
        navGrid(<name>, {<buttons, true/false},
        {
        <edit parameters>
        },
        {
        <add parameters>
        },
        {
        <delete parameters>
        }  
      */

Thanks for everyone who might have started working on this, and definitely thanks to the developers of jqgrid. Best javascript grid I have ever worked with!