web-dev-qa-db-ja.com

jqgridは、インライン更新の成功/レコードのインライン作成後にグリッドをリロードします

行のインライン編集後にreloadGridをトリガーする方法を知りたいのですが。

<script type="text/javascript">

    jQuery(document).ready(function(){
      var lastcell; 
      jQuery("#grid").jqGrid({
          url:'{{ json_data_handler }}?year={{ get_param_year }}&month={{ get_param_month }}&project_id={{ get_param_project_id }}',
          datatype: "json",
          mtype: 'GET',
          colNames:['hour_record_pk', 'project_pk', 'weekday', 'date', 'sum', 'description'],
          colModel:[
                    {name:'hour_record_pk',index:'hour_record_pk', width:55, sortable:false, editable:true, editoptions:{readonly:true,size:10}},
                    {name:'project_pk',index:'project_pk', width:55, sortable:false, editable:true, editoptions:{readonly:true,size:10}},
                    {name:'weekday',index:'weekday', width:300, editable:false, sortable:false},
                    {name:'date_str',index:'date_str', width:300, editable:true, sortable:false, editoptions:{readonly:true}},
                    {name:'sum',index:'sum', width:100, editable:true, sortable:true,editrules:{number:true,minValue:0,maxValue:24,required:true}},
                    {name:'description',index:'description', width:600, editable:true, sortable:false,},
               ],
         jsonReader : {
              repeatitems:false
         },
          rowNum:31,
          rowList:[10,20,31],
          //pager: jQuery('#gridpager'),
          sortname: 'id',
          viewrecords: true,
          sortorder: "asc",
          width: 800,
          height: 750,
          caption:"Hour Record Overview",
          reloadAfterEdit: true, //seems to have no effect
          reloadAfterSubmit: true, //seems to have no effect
          onSelectRow: function(id){    
                if(id && id!==lastcell){
                    jQuery('#grid').jqGrid('restoreRow',lastcell);
                    jQuery('#grid').jqGrid('editRow',id,true);
                    lastcell=id;
                    }
                }, 
          editurl:"{% url set_hour_record_json_set %}"
     }).navGrid('#gridpager');
    });

function reload(result) {
    $("#grid").trigger("reloadGrid"); 
    }

私はすでにリロードメソッドを作成しましたが、どこにそれを入れるべきか分かりません。

jQuery('#grid').jqGrid('editRow',id,true,reload());

ただし、これはユーザーが行をクリックしたときに既に呼び出されています。上記のコードにより、ユーザーは行をクリックしてEnterキーを押すと、データが送信され、レコードが更新または作成されます。

ユーザーが新しいオブジェクトを作成した後、グリッドをリロードする必要があります。これは、この行をさらに編集するために、新しく作成されたオブジェクトのオブジェクトIDが必要だからです。

編集：ソリューション：

onSelectRow: function(row_id){
             if(row_id != null) {
                if(row_id !== last_selected_row) {
                    jQuery('#grid').jqGrid('restoreRow',last_selected_row);
                    jQuery('#grid').jqGrid('saveRow',row_id)
                           .editRow(row_id, true,false,reload);
                    last_selected_row = row_id; 
                } else {
                    last_selected_row=row_id;
                }
              }
            },

更新：将来の参照用。 jsgridから開始するすべてのユーザーは、jqgridからslickgridに切り替えて、推奨しかできないため、 Slickgrid を参照することもできます。

jqueryjqgrid
20
Thomas Kremmel

EditRow関数の構文は次のとおりです

jQuery("#grid_id").jqGrid('editRow', rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc);

oneditfunc：編集のために行に正常にアクセスした後、入力フィールドへのユーザーアクセスを許可する前に発生します。行のIDは、パラメーターとしてこの関数に渡されます。

succesfunc：定義されている場合、この関数はリクエストが成功した直後に呼び出されます。この関数には、サーバーから返されたデータが渡されます。サーバーからのデータに応じて。この関数はtrueまたはfalseを返す必要があります。

aftersavefunc：定義されている場合、この関数はデータがサーバーに保存された後に呼び出されます。この関数に渡されるパラメーターは、rowidとサーバー要求からの応答です。

あなたの場合、行が保存された後にグリッドを再読み込みしたい場合、editRowメソッドの呼び出しは次のようになります。

jQuery('#grid').jqGrid("editRow", id, true, '', '', '', '', reload)

'aftersavefunc'パラメータのグリッドを再ロードするreload関数を割り当てました

reloadメソッド自体は次のように定義する必要があります

function reload(rowid, result) {
  $("#grid").trigger("reloadGrid"); 
}
38
Vinodh Ramasubramanian

これを試して

      $("#grid").jqGrid('editRow', rowid, true, null, null, null, {}, aftersavefunc);

//

        function aftersavefunc(rowid, result) {
        $("#grid").trigger("reloadGrid");
    }


//
3
aamir sajjad

Ок、少なくとも私にとっては機能するコピーアンドペーストソリューション

 onSelectRow: function(id){
    $('#grid').jqGrid("editRow", id, true, '', '', '', '', reloadTable);
 },
 // more confir

 // reload table after submit. Put it somewhere in your JS file
  function reloadTable(result) {
    $('#grid').trigger("reloadGrid");
  }
0
ymakux

SaveRowメソッドをご覧ください。

saveRow（rowid、succesfunc、url、extraparam、aftersavefunc、onerrorfunc）

これは、リクエストが正常に完了したときとデータが保存された後に呼び出される2つのコールバック（successfuncs、aftersavefunc）を定義します。

0
kgiannakakis

ドキュメントから、afterSaveCellが最適だと思います（afterSubmitCellも同様に機能しますが、特定の戻り値が必要なようです。afterEditCellはサーバーがヒットする前に発生します早すぎるでしょう）。

jQuery('#grid').jqGrid('editRow', id, true, reload);

jQuery(document).ready(function(){
    var lastcell; 
   jQuery("#grid").jqGrid({

      // [snip earlier config]

      onSelectRow: function(id){    
            if(id && id!==lastcell){
                jQuery('#grid').jqGrid('restoreRow',lastcell);
                jQuery('#grid').jqGrid('editRow',id,true);
                lastcell=id;
                }
            }, 
      editurl:"{% url set_hour_record_json_set %}",
      onAfterSaveCell: reload
   }).navGrid('#gridpager');
});

function reload(result) {
    $("#grid").trigger("reloadGrid"); 
}

ただし、これまでに説明した情報を考えると、グリッド全体の再読み込みはおそらくやり過ぎです。送信された情報のサーバー側の処理がない限り（保存後にデータベース内のデータが異なる可能性があることを意味します）、単純な編集後の再読み込みは時間の無駄のように思えます。

新しい行を作成するときは、サーバー側のみのデータ変更がない限り、サブミットから新しいIDを取得し、jqGridで個別に変更する方が簡単だと思われます。ただし、最終的にはテーブル全体をリロードするのにかかる時間に大きく依存します。

0
Rob Van Dam