lưới tải lại jqgrid sau khi cập nhật nội tuyến thành công/tạo bản ghi nội tuyến

Question

Tôi tự hỏi làm thế nào tôi có thể kích hoạt reloadGrid sau khi chỉnh sửa nội tuyến của một hàng.

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

tôi đã tạo ra một phương pháp tải lại nhưng tôi không chắc chắn nơi để đặt nó trong tôi đã cố gắng:.

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

nhưng điều này đã được gọi khi người dùng nhấp chuột vào một hàng. Mã trên cho phép người dùng nhấp vào một hàng và khi nhấn nhập dữ liệu được gửi và bản ghi được cập nhật hoặc tạo.

Sau khi người dùng tạo đối tượng mới, tôi phải tải lại lưới, vì tôi cần id đối tượng của đối tượng mới được tạo, để chăm sóc chỉnh sửa thêm hàng này.

Edit: Các giải pháp:

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; 
       } 
       } 
      }, 

Cập nhật: Để tham khảo trong tương lai. Tất cả người dùng bắt đầu với js lưới cũng có thể có một cái nhìn tại Slickgrid như tôi chuyển từ jqgrid để slickgrid và chỉ có thể giới thiệu nó.

Answer 1

Đây là cú pháp của editRow chức năng

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.

Trong trường hợp của bạn nếu bạn muốn lưới nạp lại sau khi hàng được lưu cuộc gọi đến phương pháp editRow nên đọc như sau.

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

tôi đã gán tải lại bạn chức năng mà tải lại lưới điện cho 'aftersavefunc' tham số

phương pháp tải lại bản thân cần được xác định như sau

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

Answer 2

Có xem xét phương pháp saveRow:

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

trong đó xác định hai callback (successfuncs, aftersavefunc) được gọi là, khi yêu cầu được hoàn thành và sau khi dữ liệu đã được lưu tương ứng.

Answer 3

Từ tài liệu, tôi nghĩ afterSaveCell sẽ hoạt động tốt nhất cho bạn (afterSubmitCell cũng có thể hoạt động nhưng có vẻ như yêu cầu giá trị trả lại cụ thể. afterEditCell xảy ra trước khi xảy ra lỗi máy chủ để quá sớm).

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

Tuy nhiên, tải lại toàn bộ lưới điện có lẽ là quá mức cần thiết cho các thông tin mà bạn đã mô tả cho đến nay. Trừ khi có xử lý bên máy chủ của thông tin được gửi (có nghĩa là dữ liệu trong db có thể khác sau khi lưu), việc tải lại sau khi chỉnh sửa đơn giản dường như với tôi như một sự lãng phí thời gian. Đối với khi bạn đang tạo một hàng mới, một lần nữa, trừ khi có dữ liệu chỉ phía máy chủ munging nó có vẻ như nó sẽ được dễ dàng hơn để chỉ nhận được id mới từ trình và sau đó thực hiện thay đổi cá nhân trong jqGrid. Tuy nhiên, cuối cùng nó phụ thuộc rất nhiều vào bao lâu nó tải lại toàn bộ bảng của bạn.

Answer 4

Hãy thử điều này

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

// 

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


// 

Answer 5

Ок, bây giờ giải pháp sao chép-dán hoạt động ít nhất cho tôi

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