本地删除 jqgrid 后触发事件

发布于 2024-11-16 07:34:30 字数 2957 浏览 4 评论 0原文

所以我想做的是在 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,但这也不起作用。我已经为此工作了几天,并得出结论,我可能必须完全为删除按钮编写自己的自定义代码,但我希望情况并非如此。

So what I am trying to do is fire an event AFTER a local delete has been done on the jqgrid. The reason for this is because I am dealing with a global save on the website so I am not posting directly to the server. I am storing the data in JSON form within a hidden element on the page so when the user finally saves the element value is grabbed and sent to the server along with all the other data.

The issue I am having is that when I delete a row from the jqgrid I am not able to update the hidden element with the change, so if the user saves after that it is like the remove never happened.

      $("#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,""];
            }
        });

As indicated in the code above I am successfully updating the hidden element with the changes on both add and edit (inline) via afterrestorefunc, but this is not working for delete.

I have tried using afterSubmit in the code above, but this is not working either. I have been working on this for a few days now and have come to the conclusion that I might have to write my own custom code for the delete button entirely, but I am hoping this is not the case.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

围归者 2024-11-23 07:34:30

OP 在编辑中写道:

看来我盯着这个问题太久了,而忽略了显而易见的事情……我很幸运。我发现了两件事:

  1. 使用 afterSubmit 是错误的,我应该使用 afterComplete。

  2. 我在尝试 afterSubmit 之前尝试过使用 afterComplete ,它不起作用的原因是因为我将它们都放在“添加”参数中而不是删除中。再一次,我对那个感觉非常棒:)

现在我已经发现这是拯救我生命的代码片段:

 jQuery("#translationMappingGrid").navGrid('#pager',{
    编辑:假,添加:真,删除:真,搜索:假,刷新:真
    }, {
        添加后关闭:true,
        编辑后关闭:true
    },
    {
        添加后关闭:true,
        编辑后关闭:true
    },{
        完成后:
            功能 () {
                //将更改后的JSON字符串保存到隐藏元素
                setTranslationMappingJSON(getGridDataJSONString(jQuery('#translationMappingGrid')));
                window.parent.document.getElementById('notificationDiv').style.display= "";
            }                       
    });

这已经过测试,并且在执行删除后调用该函数并将本地更改保存到我的隐藏元素。

对于任何对格式是什么感到好奇的人:

 /* 以下是设置 
        navGrid(<名称>, {<按钮, true/false},
        {
        <编辑参数>
        },
        {
        <添加参数>
        },
        {
        <删除参数>
        }  
      */

感谢所有可能开始从事此工作的人,特别感谢 jqgrid 的开发人员。我用过的最好的 javascript 网格!

The OP wrote in an edit:

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!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文