logo标签列表

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

jqueryjqgrid
20

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

更新：供以后参考。所有开始使用JS Grid的用户也可以看一下Slickgrid，因为我从jqgrid切换到slickgrid，只能推荐它。

你的最终编辑：这个解决方案对我帮助很大。感谢您的包容。 - Tareq
1
我无法让上述代码工作，它给了我一个 TypeError: jQuery("#tnc-list").jqGrid("saveRow", row_id).editRow 不是一个函数的错误。 - Marvzz
对我没用，向下滚动，有可行的代码。 - ymakux
5个回答
38

这里是editRow函数的语法

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

oneditfunc: 在成功访问要编辑的行之后触发，在允许用户访问输入字段之前。该行的 ID 作为参数传递给此函数。

succesfunc: 如果定义了此函数，请求成功后会立即调用它。该函数将传递从服务器返回的数据。根据服务器返回的数据，此函数应该返回 true 或 false。

aftersavefunc: 如果定义了此函数，数据保存到服务器后将调用此函数。传递给此函数的参数是行 ID 和服务器请求的响应。

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

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

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

重载方法本身应定义如下：

function reload(rowid, result) {
  $("#grid").trigger("reloadGrid"); 
}
实际上，所有的答案都帮助我解决了我的问题。但我认为这个答案让我最终朝着正确的方向看齐。请参见我在问题编辑部分的解决方案代码。谢谢。 - Thomas Kremmel
1
我应该把jQuery('#grid').jqGrid("editRow", id, true, '', '', '', '', reload)放在哪里？ - Marvzz
3

试试这个

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

//

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


//
0
从文档来看，我认为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中进行单个更改会更容易。然而，最终取决于重新加载整个表格需要多长时间。

谢谢，听起来很合理，但是有些东西不起作用。重新加载没有被触发。为什么你要把jQuery('#grid').jqGrid('editRow', id, true, reload);放在开头？当我把它放在我的表格开头时，什么都不起作用。但无论如何，从提交中获取新的id正是我想要实现的。也许我的描述有点误导。你知道我怎样才能从提交中获取新的db id并将其放置在jqgrid-row hour_record_pk中吗？ - Thomas Kremmel
你必须知道，我的表格由一个月内查看的hour_records组成。但仅当存在特定日期的hour_record时，相应的行才具有数据库中的db id（显示在hour_record_pk列中）。当我编辑一个没有id的行时，新值被提交到数据库并创建一个新的hour record。然后我需要重新加载网格以获取db id，或者从提交中获取新的db id。否则，如果用户想要更改新创建的hour record，我会遇到问题，因为我不知道要更改哪个hour-record。 - Thomas Kremmel
0

好的，现在复制粘贴这个对我有效的解决方案

 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

看一下saveRow方法：

saveRow(rowid, successfunc, url, extraparam, aftersavefunc, onerrorfunc)

该方法定义了两个回调函数（successfunc和aftersavefunc），分别在请求成功完成后和数据保存后调用。

1
是的，但我必须把这个函数放在哪里？我认为我必须将其插入到以下一个事件中：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing.. 但是不管是afterSubmitCell、 afterEditCell 还是afterSaveCell，在单元格更新发送到url之后是否触发都无所谓：editurl：“{% url set_hour_record_json_set %}” - Thomas Kremmel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接