jqgrid перезагрузить сетку после успешного встроенного обновления / встроенного создания записи - PullRequest
20 голосов
/ 21 января 2010

Мне интересно, как я могу вызвать 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"); 
    } 

Я уже создал метод перезагрузки, но я не уверен, куда его вставить. Я попытался:

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

но это уже вызывается, когда пользователь нажимает на строку. Приведенный выше код позволяет пользователю щелкнуть строку и при нажатии клавиши ввода данные отправляются, а запись обновляется или создается.

После того, как пользователь создал новый объект, я должен перезагрузить сетку, так как мне нужен идентификатор объекта вновь созданного объекта, чтобы позаботиться о дальнейшем редактировании этой строки.

Редактировать: Решение:

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 grids, могут также взглянуть на Slickgrid , когда я переключился с jqgrid на slickgrid и могу только рекомендовать его.

Ответы [ 5 ]

38 голосов
/ 28 января 2010

Вот синтаксис функции editRow

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

oneditfunc : срабатывает после успешного доступ к строке для редактирования, до чтобы позволить пользователю доступ к входу поля. Идентификатор строки передается как параметр этой функции.

succesfunc : если определено, эта функция вызывается сразу после запрос выполнен успешно Эта функция передаются данные, возвращенные из сервер. В зависимости от данных сервер; эта функция должна вернуть правда или ложь.

aftersavefunc : если определено, это Функция вызывается после того, как данные сохранено на сервере. Параметры переданы к этой функции являются rowid и ответ на запрос сервера.

В вашем случае, если вы хотите перезагрузить сетку после сохранения строки, вызов метода editRow должен выглядеть следующим образом.

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

Я назначил вашу функцию reload , которая перезагрузит сетку для параметра aftersavefunc '

сам метод перезагрузки должен быть определен следующим образом

function reload(rowid, result) {
  $("#grid").trigger("reloadGrid"); 
}
3 голосов
/ 28 сентября 2011

Попробуйте это

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

//

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


//
0 голосов
/ 12 июля 2013

Ок, теперь решение для копирования и вставки, которое работает, по крайней мере, для меня

 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 голосов
/ 26 января 2010

Из документов, я думаю, 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"); 
} 

Однако перезагрузка всей сетки, вероятно, излишня, учитывая информацию, которую вы описали до сих пор. Если не выполняется обработка представленной информации на стороне сервера (то есть данные в БД после сохранения могут отличаться), перезагрузка после простого редактирования кажется мне пустой тратой времени.

Что касается того, что вы создаете новую строку, опять же, если только нет серверной обработки данных, кажется, что было бы проще просто получить новый идентификатор из отправки и затем внести это индивидуальное изменение в jqGrid. Тем не менее, в конечном итоге это зависит от того, сколько времени потребуется перезагрузить всю таблицу.

0 голосов
/ 25 января 2010

Взгляните на метод saveRow:

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

, который определяет два обратных вызова (successfuncs, aftersavefunc) для вызова, когда запрос успешно завершен и после сохранения данных соответственно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...