jqGrid - вертикальная полоса прокрутки не отображается

Question

Я работаю над jQuery jqgrid плагином. В этой сетке у меня есть 1 000 000 записей с опцией scroll: 1. а также у меня есть опция rowNum: 10 в моей сетке. Но только первые 10 строк отображаются в сетке, а вертикальная полоса прокрутки отсутствует. в заголовке у меня есть «отображение 1-10 из 1 000 000». это означает, что общий расчет количества правилен, но я не знаю, почему прокрутка отсутствует. Может ли кто-нибудь помочь мне решить эту проблему?

EDIT: Моя версия jqGrid: 4.6.0. Вот мой Javascript код:

$(document).ready(function() { 
      var colModel = [ 
       {name: "id", width: 200, align: "center", searchoptions: {clearSearch: false}, hidden: true, hiddenlg: true}, 
       {name: "ordernumber", width: 200, align: "center", searchoptions: {clearSearch: false}}, 
       {name: "customer.fname", width: 200, align: "center", searchoptions: {clearSearch: false}}, 
       {name: "customer.lname", width: 200, align: "center", searchoptions: {clearSearch: false}}, 
      ]; 
      $("#list").jqGrid({ 
       url: "/orders/listGrid", 
       datatype: "json", 
       mtype: "POST", 
       colNames: ["", "1", "2", "3"], 
       colModel: colModel, 
       pager: "#pager", 
       rowNum: 10, 
       rowList: [10, 20, 30], 
       viewrecords: true, 
       multiSort: false, 
       gridview: true, 
       autoencode: true, 
       shrinkToFit: false, 
       autowidth: true, 
       scroll: 1, 
       direction: "rtl", 
       height: 230, 
       caption: "Test", 
       hidegrid: false, 
       ajaxGridOptions: { 
        contentType: "application/json; charset=utf-8" 
       }, 
       serializeGridData: function(data) { 
        return JSON.stringify(data); 
       }, 

      }); 
     }); 

И это мой HTML-код:

<table id="list"></table> 
<div id="pager"></div> 

Answer 1

Проблема существует, вероятно, потому что вы используете очень большое количество строк и текущую реализацию виртуальной прокрутки не позволяет для отображения такого количества строк. Точное ограничение максимального количества строк зависит от используемого вами веб-браузера. Посмотрите на the bug report, который я опубликовал несколько лет назад. См. Также the post.

Проблема заключается в следующем. jqGrid использует div вне сетки и пытается установить его высоту на значение parseInt(ts.p.records,10) * rowHeight (см. the line), где rowHeight - 23px. Поэтому jqGrid попытается установить height на 23000000px в вашем случае, но он не изменит значение height, и на нем не будет вертикальной полосы прокрутки.

Можно попытаться сделать некоторые трюки, как использование кода, как

jsonReader: { 
    records: function (obj) { 
     // return not so large value of records 
     return Math.min(66692, obj.records); 
    } 
}, 
loadComplete: function (data) { 
    var $self = $(this), p = $self.jqGrid("getGridParam"), 
     numberFormat = $.fmatter.util.NumberFormat || $.fmatter.NumberFormat, 
     fmt = $.jgrid.formatter.integer || {}, 
     from = numberFormat(parseInt(p.page,10), fmt), 
     to = numberFormat((parseInt(p.page,10)-1)*parseInt(p.rowNum,10) + p.reccount, fmt), 
     total = numberFormat(parseInt(data.records,10), fmt); // use correct value 

    // fix the displayed row numbers 
    $(".ui-paging-info", p.pager) 
     .html($.jgrid.format(p.recordtext, from, to, total)); 
} 

см the demo. Но такой трюк позволит отображать только некоторые первые страницы сетки. Make jqGrid действительно способен отображать большое количество строк в случае виртуальной прокрутки (scroll: 1), нужно переписать некоторые части кода jqGrid.

Я предлагаю вам лучше использовать стандартный поисковый вызов вместо виртуальной прокрутки. Использование будет использовать кнопки «Первая/Предыдущая/Следующая/Последняя» пейджера, но большинство пользователей, которым необходимо проверять 1 000 000 строк данных, могут это сделать.

Чтобы сообщить об этом, никто не будет прокручивать более 1 000 000 строк. Вместо этого нужно обеспечить хорошую фильтрацию/возможность поиска. Например, для использования filterToolbar и advanced searching. После установки соответствующего фильтра отфильтрованные данные могут отображаться в пределах от 1 до 10 страниц, и такие данные могут быть действительно интересными для отображения.