在本地删除jqgrid后触发事件

Question

在本地删除jqgrid后触发事件

3

所以我要做的是在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，但这也不起作用。我已经花了几天时间来解决这个问题，得出结论可能必须完全编写自己的自定义代码来处理删除按钮，但我希望情况并非如此。

- Brandon

当我看到你找到了解决方案时，我感到很兴奋，但不幸的是我们的情况有些不同。我已经停止使用navgrid，但仍然希望在删除行时（例如我正在使用的“delRowData”）引发一些事件。但很高兴你自己找到了解决方法，非常好的描述！ - Charles Roberto Canato

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brian Tompsett - 汤莱恩 · Accepted Answer

在编辑中，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:

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

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!