jQuery 成功内联更新/内联创建记录后，jqgrid 重新加载网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2109754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqgrid reload grid after successful inline update / inline creation of record
提问by Thomas Kremmel
I'm wondering how I can trigger reloadGrid after an inline edit of a row.
我想知道如何在行内联编辑后触发 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");
}
I created already a reload method but I'm not sure where to put it in. I tried:
我已经创建了一个 reload 方法，但我不知道把它放在哪里。我试过：
jQuery('#grid').jqGrid('editRow',id,true,reload());
but this is already called when the user clicks into a row. The code above allows the user to click into a row and when pressing enter the data is submitted and the record updated or created.
但是当用户单击一行时这已经被调用了。上面的代码允许用户单击一行，并在按下 Enter 键时提交数据并更新或创建记录。
After the user created a new object I have to reload the grid, since I need the object id of the newly created object, in order to take care of further editing this row.
用户创建新对象后，我必须重新加载网格，因为我需要新创建对象的对象 ID，以便进一步编辑该行。
Edit: The 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;
}
}
},
Update: For future reference. All users starting with js grids might also have a look at Slickgridas I switched from jqgrid to slickgrid and can only recommend it.
更新：以供将来参考。所有开始JS网格用户还可以看看Slickgrid我从jqGrid的切换到slickgrid，只能推荐它。
回答by Vinodh Ramasubramanian
Here is the syntax of the editRow function
这是 editRow 函数的语法
jQuery("#grid_id").jqGrid('editRow', rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc);
oneditfunc: fires after successfully accessing the row for editing, prior to allowing user access to the input fields. The row's id is passed as a parameter to this function.
succesfunc: if defined, this function is called immediately after the request is successful. This function is passed the data returned from the server. Depending on the data from server; this function should return true or false.
aftersavefunc: if defined, this function is called after the data is saved to the server. Parameters passed to this function are the rowid and the response from the server request.
oneditfunc：在允许用户访问输入字段之前成功访问行进行编辑后触发。行的 id 作为参数传递给此函数。
succesfunc: 如果已定义，则在请求成功后立即调用此函数。该函数传递从服务器返回的数据。取决于来自服务器的数据；这个函数应该返回真或假。
aftersavefunc: 如果定义，则在数据保存到服务器后调用此函数。传递给此函数的参数是 rowid 和来自服务器请求的响应。
In your case if you want to grid reloaded after the row is saved the call to editRow method should read as follows.
在您的情况下，如果您想在保存行后重新加载网格，则对 editRow 方法的调用应如下所示。
jQuery('#grid').jqGrid("editRow", id, true, '', '', '', '', reload)
I have assigned your reloadfunction which reloads the grid for 'aftersavefunc' parameter
我已经分配了您的重新加载功能，该功能为“ aftersavefunc”参数重新加载网格
the reload method itself should be defined as follows
reload 方法本身应该定义如下
function reload(rowid, result) {
$("#grid").trigger("reloadGrid");
}
回答by aamir sajjad
Try this
尝试这个
$("#grid").jqGrid('editRow', rowid, true, null, null, null, {}, aftersavefunc);
//
function aftersavefunc(rowid, result) {
$("#grid").trigger("reloadGrid");
}
//
回答by ymakux
Ок, now copy-paste solution that works at least for me
Ок，现在复制粘贴解决方案至少对我有用
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");
}
回答by kgiannakakis
Have a look at the saveRow method:
看看 saveRow 方法：
saveRow (rowid, succesfunc, url, extraparam, aftersavefunc, onerrorfunc)
saveRow (rowid, succesfunc, url, extraparam, aftersavefunc, onerrorfunc)
which defines two callback (successfuncs, aftersavefunc) to be called, when the request is completed successfully and after the data have been saved respectively.
它定义了两个回调（successfuncs，aftersavefunc），分别在请求成功完成和数据保存后调用。
回答by Rob Van Dam
From the docs, I think afterSaveCellwill work best for you (afterSubmitCellcould work as well but it seems to require a specific return value. afterEditCellhappens before the server hit occurs so that will be too soon).
从文档中，我认为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");
}
However, reloading the entire grid is probably overkill given the information you've described so far. Unless there is server side processing of submitted information (meaning the data in the db might different after a save), reloading after a simple edit seems to me like a waste of time.
但是，鉴于您目前所描述的信息，重新加载整个网格可能有点过头了。除非服务器端对提交的信息进行处理（意味着保存后数据库中的数据可能会有所不同），否则在简单编辑后重新加载在我看来是浪费时间。
As for when you are creating a new row, again, unless there is server-side only data munging it seems like it would be easier to just get the new id from the submit and then make that individual change in jqGrid. However, in the end it depends a lot on how long it takes reload your whole table.
至于何时创建新行，除非只有服务器端的数据处理，否则从提交中获取新 id 然后在 jqGrid 中进行单独更改似乎更容易。但是，最终这在很大程度上取决于重新加载整个表所需的时间。
