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

Tho*_*mel 20 jquery jqgrid

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

我已经创建了一个重载方法,但我不确定它放在哪里.我试过:

jQuery('#grid').jqGrid('editRow',id,true,reload());
Run Code Online (Sandbox Code Playgroud)

但是当用户点击一行时,这已被调用.上面的代码允许用户点击一行,当按下输入时,提交数据并更新或创建记录.

在用户创建新对象后,我必须重新加载网格,因为我需要新创建的对象的对象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;
                }
              }
            },  
Run Code Online (Sandbox Code Playgroud)

更新:供将来参考.所有以js grids开头的用户也可以查看Slickgrid,因为我从jqgrid切换到slickgrid并且只能推荐它.

Vin*_*ian 38

这是editRow函数的语法

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

oneditfunc:在允许用户访问输入字段之前,在成功访问行进行编辑后触发.行的id作为参数传递给此函数.

succesfunc:如果已定义,则在请求成功后立即调用此函数.此函数传递从服务器返回的数据.取决于来自服务器的数据; 此函数应返回true或false.

aftersavefunc:如果已定义,则在将数据保存到服务器后调用此函数.传递给此函数的参数是rowid和服务器请求的响应.

在您的情况下,如果要在保存行后重新加载网格,则对editRow方法的调用应如下所示.

jQuery('#grid').jqGrid("editRow", id, true, '', '', '', '', reload)
Run Code Online (Sandbox Code Playgroud)

我已经分配了你的重载功能,它为' aftersavefunc '参数重新加载网格

重载方法本身应定义如下

function reload(rowid, result) {
  $("#grid").trigger("reloadGrid"); 
}
Run Code Online (Sandbox Code Playgroud)