jqGrid - 未显示寻呼机。如何启用它？

Question

我不知道为什么，但我使用 jqGrid 和寻呼机无法正常显示。我可以显示 viewrecords，但寻呼机不行。表的其余部分工作正常。

有人可以告诉我问题出在哪里吗？

我的 JQGrid 是：

jQuery('#report_table').jqGrid({               
     scroll: 'true',               
     url:'getReportTableData.json',                     
     datatype: 'json',             
     height: 400,                   
     width: 800,                    
     colNames:['Futures','Units'],                
     colModel:[
        {name:'Futures',index:'Futures',  width: 150, sortable: false},
        {name:'Units',index:'Units',  width: 150, sortable: false],                
     rowNum:100,                    
     loadonce:'false',               
     shrinkToFit: 'true',              
     mtype: 'POST',                
     pager: '#preport_table',                
     postData: { idReport : '75' }, 
     viewrecords: 'true',            
     loadComplete : function (data) {                        
         if (data.error == 1){                                
             $('#dialog-modal').dialog({                       
                 height: 140, width: 300,  modal: true, title: ' Error ',  
                 buttons: { cerrar : function() { 
                         $(this).dialog('close');                
                     }                                           
                 }                                               
             });                                                 
             $('#dialog-modal').html(msgError(data.msg));    
         }                                                       
     },                                                          
     caption: '',                  
     hidegrid: 'true', 
});   

html 代码是

<table id='report_table'></table> <div id='preport_table' ></div>

谢谢。

Answer 1

您的主要问题是 scroll: true 选项。在该选项的文档中，您将找到以下内容：

启用后，分页器元素将被禁用，我们可以使用
垂直滚动条加载数据。

此外，您的代码有一些语法错误，您应该修复这些错误：

• colModel 的第二列不包含“}”（请参阅​​“]”之前）。
• 布尔值应编码为 true 和 false，而不是字符串 'true' 和 'false'（请参阅
  滚动：'true'，loadonce：'false'，shr​​inkToFit：'true'，viewrecords：'true' >, hidegrid: 'true')

Answer 2

对于遇到我的问题的其他人，gridview: true 可能会导致寻呼机不显示。我删除了 gridview 属性，然后出现了寻呼机栏。

Answer 3

我准备了一些可运行的 jqGrid 来向您展示如何正确启用寻呼机（基于我在不同的答案）。

滚动和 gridview 属性似乎没有任何区别，我已将它们添加到下面的示例 4 中，并且它仍然有效（这是与网格 3 相比的唯一区别）。

Grid1 显示可滚动的数据，而第二个则显示分页器。
区别在于属性：

pager: '#pagerGrid2', rowNum: 4, viewrecords: true,

其中 viewrecords 只是可选的，用于显示有多少记录可用。省略它可以隐藏记录编号显示。

rowNum 参数指定多少您想要查看的每页行数（此处为 4）。
请注意，由于此处的高度 (45) 太小，因此它仍然显示垂直滚动条 - 以及寻呼机 (1 of 2)。 Grid2 就是这种情况。

要摆脱滚动条，请增加高度参数的大小。这显示在下面示例中的 Grid3 中。

// see: https://free-jqgrid.github.io/getting-started/
// CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid
$(function() {
  var gridSampleData = [
      { id: 10, firstName: "Jane", lastName: "Doe1"},
      { id: 20, firstName: "Justin", lastName: "Time1" },
      { id: 30, firstName: "Jane", lastName: "Doe2"},
      { id: 40, firstName: "Justin", lastName: "Time2" },
      { id: 11, firstName: "Jane", lastName: "Doe3"},
      { id: 21, firstName: "Justin", lastName: "Time3" },
      { id: 31, firstName: "Jane", lastName: "Doe4"},
      { id: 41, firstName: "Justin", lastName: "Time4" }
    ];
  $("#Grid1").jqGrid({
    height: 45, width: 250,
    colNames: ['First name', 'Last name'],
    colModel: [{name: "firstName"}, {name: "lastName"}],
    data: gridSampleData
  });
  $("#Grid2").jqGrid({
    pager: '#pagerGrid2', rowNum: 4, scroll: false, viewrecords: true,  
    height: 45, width: 400,
    colNames: ['First name', 'Last name'],
    colModel: [{name: "firstName"}, {name: "lastName"}],
    data: gridSampleData
  });
  $("#Grid3").jqGrid({
    pager: '#pagerGrid3', rowNum: 4, scroll: false, viewrecords: true,  
    height: 90, width: 400,
    colNames: ['First name', 'Last name'],
    colModel: [{name: "firstName"}, {name: "lastName"}],
    data: gridSampleData
  });
  $("#Grid4").jqGrid({ scroll: 'true', gridview: true,
    pager: '#pagerGrid4', rowNum: 4, scroll: false, viewrecords: true,  
    height: 90, width: 400,
    colNames: ['First name', 'Last name'],
    colModel: [{name: "firstName"}, {name: "lastName"}],
    data: gridSampleData
  });
});

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Canonical jqGrid example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>

<table id="Grid1"></table>
<br/>

<table id="Grid2"></table>
<table id="pagerGrid2"></table>
<br/>

<table id="Grid3"></table>
<table id="pagerGrid3"></table>

<table id="Grid4"></table>
<table id="pagerGrid4"></table>

注意：单击完整页面（单击运行代码片段后的右上角，可以更好地查看网格）。