2011-06-20 8 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は編集に書いた:私は私のラッキー....あまりにも長い間問題を見つめたと明らかに欠けていたかのように

だからそれが表示されます。私は二つのことを見つけた:afterSubmitを使用して

  1. は、使用する間違ったことだった、代わりに私がafterCompleteを使用する必要があります。

  2. 私は、後で試してみる前にafterCompleteを試してみました。なぜなら、私はそれらを「追加」のパラメータと削除ではないから入れているからです。もう一度、私はそのいずれかのすごい感じ:)

さて、今私はここにそれを考え出したというのが私の命を救ったコードスニペットです:

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

これがテストされ、機能削除が実行された後に呼び出され、ローカルの変更が隠された要素に保存されます。この上で作業を開始し、間違いjqgridの開発者に感謝している可能性があるすべての人のための

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

ありがとう:フォーマットが何であるかについて興味がある人のため

。私はこれまでに働いたベストJavaScriptグリッド!

+0

([編集で回答した質問とコミュニティwikiに変換した質問](http://meta.stackoverflow.com/questions/267434/what-is-the-appropriate-action-when-the-answer-to-a-疑問が追加されました))。 –

関連する問題