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 选项。在the documentation的选项中你会发现以下内容：

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

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

• colModel 的第二列不包含“}”（参见前面的“]”）。
• 布尔值应编码为true 和false，而不是字符串'true' 和'false'（参见 scroll: 'true', loadonce:'false', shrinkToFit: 'true', viewrecords: 'true', hidegrid: 'true')

Answer 2

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

Answer 3

我准备了一些可运行的 jqGrids 来向您展示如何正确启用寻呼机（基于我在另一个答案中提供的 canonical example）。

scroll 和 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>

注意：点击整页（点击Run Code Snippet后右上角可以更好地查看网格）。