行のインライン編集後に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 を参照することもできます。
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");
}
これを試して
$("#grid").jqGrid('editRow', rowid, true, null, null, null, {}, aftersavefunc);
//
function aftersavefunc(rowid, result) {
$("#grid").trigger("reloadGrid");
}
//
Ок、少なくとも私にとっては機能するコピーアンドペーストソリューション
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");
}
SaveRowメソッドをご覧ください。
saveRow(rowid、succesfunc、url、extraparam、aftersavefunc、onerrorfunc)
これは、リクエストが正常に完了したときとデータが保存された後に呼び出される2つのコールバック(successfuncs、aftersavefunc)を定義します。
ドキュメントから、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で個別に変更する方が簡単だと思われます。ただし、最終的にはテーブル全体をリロードするのにかかる時間に大きく依存します。