jqgrid 在成功内联更新/内联创建记录后重新加载网格

Question

我想知道如何在行的内联编辑后触发 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"); 
    } 

我已经创建了一个 reload 方法，但我不知道把它放在哪里。我试过了：

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

但是当用户点击一行时，这已经被调用了。 上面的代码允许用户点击一行，当按下回车键时，数据被提交并更新或创建记录。

用户创建新对象后，我必须重新加载网格，因为我需要新创建对象的对象 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;
                }
              }
            },  

更新：供将来参考。当我从 jqgrid 切换到 slickgrid 时，所有以 js 网格开头的用户可能也会看看 Slickgrid，并且只能推荐它。

Answer 1

看看 saveRow 方法：

saveRow (rowid, succesfunc, url, 外参数，aftersavefunc， 错误函数）

其中定义了两个回调函数(successfuncs, aftersavefunc)，分别在请求成功完成和数据保存后被调用。

Answer 2

从文档中，我认为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 中进行单独更改会更容易。但是，最终这很大程度上取决于重新加载整个表需要多长时间。

Answer 3

这里是editRow函数的语法

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

oneditfunc：成功后触发 访问行进行编辑，之前 允许用户访问输入 字段。行的 id 作为 这个函数的参数。

succesfunc：如果定义了这个函数 之后立即调用 请求成功。这个功能 传递从返回的数据 服务器。根据来自的数据 服务器;这个函数应该返回 真假。

aftersavefunc：如果已定义，则此 数据后调用函数 保存到服务器。传递的参数 这个函数是rowid和 来自服务器请求的响应。

如果您想在保存行后重新加载网格，则对 editRow 方法的调用应如下所示。

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

我已经分配了您的 reload 函数，该函数会为“aftersavefunc”参数重新加载网格

reload 方法本身应该定义如下

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

Answer 4

试试这个

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

//

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


//

Answer 5

Ок，现在至少对我有用的复制粘贴解决方案

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