grille de rechargement jqgrid après une mise à jour / création d'enregistrement en ligne réussie
je me demande comment je peux déclencher reloadGrid après une édition en ligne d'une rangée.
<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");
}
j'ai déjà créé une méthode de recharge mais je ne sais pas où la mettre. J'ai essayé:
jQuery('#grid').jqGrid('editRow',id,true,reload());
mais c'est déjà appelée lorsque l'utilisateur clique sur une ligne. Le code ci-dessus permet à l'utilisateur de cliquer dans une ligne et en appuyant sur ENTRÉE les données sont soumises et l'enregistrement mis à jour ou créé.
après que l'Utilisateur a créé un nouvel objet je dois rechargez la grille, car j'ai besoin de l'id objet de l'objet nouvellement créé, afin de prendre soin d'éditer cette ligne.
Edit: La solution:
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;
}
}
},
mise à jour: pour référence future. Tous les utilisateurs commençant par JS grids peuvent aussi avoir un regard sur Slickgrid comme je suis passé de jqgrid à slickgrid et ne peux que le recommander.
5 réponses
Voici la syntaxe de la fonction editRow
jQuery("#grid_id").jqGrid('editRow', rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc);
oneditfunc: incendies après succès accès à la ligne pour édition, avant pour permettre à l'utilisateur d'accéder à l'entrée Fields. L'id de la rangée est passé comme un paramètre à cette fonction.
succesfunc: si définie, cette fonction est appelé immédiatement après l' la demande est acceptée. Cette fonction est passé les données renvoyées par l' serveur. Selon les données de serveur; cette fonction doit retourner vrai ou faux.
aftersavefunc: si défini, ce la fonction est appelée après que les données enregistré sur le serveur. Les paramètres passés à cette fonction sont le rowid et le réponse de la requête du serveur.
dans votre cas, si vous voulez que la grille soit rechargée après que la ligne est sauvegardée, la méthode call to editRow devrait se lire comme suit.
jQuery('#grid').jqGrid("editRow", id, true, '', '', '', '', reload)
j'ai assigné votre recharger fonction qui recharge la grille pour 'aftersavefunc paramètre
la méthode de rechargement elle-même doit être définie comme suit
function reload(rowid, result) {
$("#grid").trigger("reloadGrid");
}
Essayez ceci
$("#grid").jqGrid('editRow', rowid, true, null, null, null, {}, aftersavefunc);
//
function aftersavefunc(rowid, result) {
$("#grid").trigger("reloadGrid");
}
//
jetez un oeil à la saveRow méthode:
saveRow (rowid, successfunc, url, extraparam, aftersavefunc, onerrorfunc)
qui définit deux callback (successfuncs, aftersavefunc) à appeler, lorsque la requête est terminée avec succès et après que les données ont été sauvegardées respectivement.
Dans la doc, je pense que afterSaveCell fonctionnera le mieux pour vous (afterSubmitCell pourraient fonctionner aussi bien, mais il semble nécessiter une valeur de retour. afterEditCell se produit avant que la touche du serveur se produit de sorte que ce sera trop tôt).
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");
}
cependant, recharger la grille entière est probablement exagéré compte tenu des informations que vous avez décrites jusqu'à présent. À moins qu'il n'y ait un traitement côté serveur des informations soumises (ce qui signifie que les données dans la base de données peuvent différer après une sauvegarde), rechargement après un simple edit me semble une perte de temps.
Comme lorsque vous créez une nouvelle ligne, nouveau, sauf si il est côté serveur uniquement les données munging il me semble qu'il serait plus facile d'obtenir la nouvelle carte d'identité de l'envoyer et ensuite faire le changement individuel dans jqGrid. Cependant, à la fin, cela dépend beaucoup de combien de temps il faut recharger votre table entière.
Ок, maintenant copier-coller solution qui fonctionne au moins pour moi
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");
}