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）。

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

Grid1 显示可滚动的数据，而第二个显示寻呼机。不同之处在于：

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

其中viewrecords只是可选项，用于显示可用的记录数。省略它以隐藏记录号码显示。

rowNum参数指定每页要查看的行数（此处为4）。请注意，因为这里的高度（45）太小，它仍然同时显示垂直滚动条和寻呼机（1个中的2个）。 Grid2 就属于这种情况。

要删除滚动条，请增加height参数的大小。这显示在下面示例中的 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>

注意：点击整页（点击运行代码段后右上角以获得更好的网格视图）。< / p>

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

3 个答案: