2011-06-20 115 views
3

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

我遇到的问题是,当我从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,但是这也不起作用。我一直在研究这个问题几天,并得出结论,我可能必须完全编写我自己的删除按钮的自定义代码,但我希望事实并非如此。

+0

当我看到您找到解决方案时,我非常兴奋,不幸的是我们的案例有些不同。我放弃了使用navgrid,但仍然希望在删除一行时引发一些事件(例如'delRowData',就像我使用的那样)。但很高兴你自己找到了,非常好的描述! –

回答

1

的OP在编辑写道:

所以看起来好像我是在盯着问题的时间过长,缺少明显的....我的幸运。我发现了两件事:

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

  2. 我曾尝试使用afterComplete之前尝试afterSubmit和它不工作的原因,因为我把它们都在“添加”参数,而不是删除。再次,我觉得对于一个:)

现在好了,我已经想通了这一点这里是救了我一命的代码片段相当真棒:

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= ""; 
      }      
    }); 

这是测试功能在执行删除操作后调用并将本地更改保存到隐藏元素。

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

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

感谢大家谁可能已经开始这方面的工作,绝对得益于jqGrid的开发商。我曾与之合作的最佳javascript网格!

+0

([在编辑中回答问题并转换为社区wiki](http://meta.stackoverflow.com/questions/267434/what-is-the-woole-action-when-the-answer-to-a-问题 - 被添加到所述阙))。 –