Question

tldr;想要＆lt; 4.7宽度和垂直滚动条处理（包括行数＆lt;比需要垂直滚动条时的空格）

从4.5迁移到4.13，由于4.8及更高版本中引入的大小调整，网格宽度始终是错误的。我的网格有一个固定的高度，scrollrows：true，以及可变数量的行。

我的应用程序要求所有10+网格都在显示父DIV时加载数据：none distinct（jqui .tabs）用户不想要＆＃34;数据＆＃34;切换标签时闪烁，因此必须在显示之前完全呈现网格：无删除。可见性：隐藏无法工作，因为它会破坏页面/应用程序的其他部分。

这在4.5.4中运行良好，但现在不行。

使用4.13时，垂直滚动条始终会遮挡最后一列的一部分，并强制显示不需要的水平滚动条。

如何让4.13正确使用4.7之前的宽度，以便垂直滚动条正确放置，并且在显示内部渲染时没有水平滚动条：无父DIV。

在下面的代码中，您需要使用自己的路径到jqui / jquery / jggrid css和js，因为我从我自己的服务器上提供它们。

代码：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Scroll Grid Loaded While Container is display None</title>

    <link rel="stylesheet" type="text/css" media="screen" href="/jquery/jqui/css/jquery-ui-1.10.4.custom.css" />

    <link rel="stylesheet" type="text/css" media="screen" href="/free-jqgrid/css/ui.jqgrid.css" />

    <script type="text/javascript" src="/jquery/jquery-1.11.2.js"></script>

    <script type="text/javascript" src="/jquery/jqui/js/jquery-ui-1.10.4.js"></script>

    <script type="text/javascript" src="/jquery/free-jqgrid/js/i18n/grid.locale-en.js"></script>

    <script type="text/javascript" src="/jquery/free-jqgrid/js/jquery.jqgrid.min.js"></script>

    <style type="text/css" media="screen">

    .displayNone {display:none;}

    </style>

<script>



function csGridDN (elID,caption) {

this.ID                     = elID;
this.selIRow                = 0;
this.selICol                = 0;
this.maxIRow                = 0;
this.Caption                = caption;
this.InitialRows  = [ {"Idx":1,"Col1":"1A","Col2":"1B","Col3":"1C"}];
this.BlankRow     = {"Idx":0,"Col1":"1A","Col2":"1B","Col3":"1C"};


};

$(document).ready(function() {initPhase1();});

csGridDN.prototype.init = function() {

   $(this.ID).jqGrid({
      datatype: "local", 
      height: 22*11,
      shrinkToFit:false,
      caption: this.Caption, 
      autoresizeOnLoad: false,
      adjustGridWidth:false,
      cmTemplate: {resizeable:false,sortable:false,autoResizable:false},
      colNames:["Idx","Col 1", "Col2", "Col3"], 
      colModel:[
         {name:'Idx',       index:'Idx', width:20, sorttype:"int",hidden:true},
         {name:'Col1',      index:'Col1', width:40, colTitle: "Col1"},
         {name:'Col2',      index:'Col2', width:30, colTitle: "Col2"},
         {name:'Col3',      index:'Col3', width:50, colTitle: "Col3"}
         ],
       multiselect: true,
       multiboxonly: true,
       hidegrid: false,
       scrollrows: true,
       cellEdit: false,
       cellsubmit: 'clientArray',
       footerrow: true,
   }); 


};


csGridDN.prototype.clearData = function () {
   var aRows = [].concat(this.InitialRows);
   for (var l = 0; l<aRows.length;l++) {
       aRows[l].id = aRows[l].Idx;
   }

   $(this.ID).jqGrid("clearGridData", true);
   this.maxIRow = aRows.length; 
   $(this.ID).setGridParam({ 'data': aRows, 'rowNum':this.maxIRow });
   $(this.ID).trigger("reloadGrid");

}


csGridDN.prototype.setData = function (aRows) {
   for (var l = 0; l<aRows.length;l++) {
       aRows[l].id = aRows[l].Idx;
   }

   this.maxIRow = aRows.length; 
   $(this.ID).setGridParam({ 'data': aRows, 'rowNum':this.maxIRow });
   $(this.ID).trigger("reloadGrid");

}

function reloadGrid () {
   theGrid.setData(dataRows);
   $("#notice").html("Grid was reloaded while #container was NOT \"display:none\". Scrollbar placement is now correct. jqGrid 4.5.4 puts the scroolbars correctly regardless of the display of the #container.  free-jqgrid only places scrollbars correctly when grid is loaded while NOT \"display:none\"");
}

function initPhase1() {

theGrid = new csGridDN("#DNGrid","Display None");
theGrid.init();


dataRows = [
    {"Idx":1, "Col1": "01A","Col2":"01BB","Col3":"01CCC"},
    {"Idx":2, "Col1": "02A","Col2":"02BB","Col3":"02CCC"},
    {"Idx":3, "Col1": "03A","Col2":"03BB","Col3":"03CCC"},
    {"Idx":4, "Col1": "04A","Col2":"04BB","Col3":"04CCC"},
    {"Idx":5, "Col1": "05A","Col2":"05BB","Col3":"05CCC"},
    {"Idx":6, "Col1": "06A","Col2":"06BB","Col3":"06CCC"},
    {"Idx":7, "Col1": "07A","Col2":"07BB","Col3":"07CCC"},
    {"Idx":8, "Col1": "08A","Col2":"08BB","Col3":"08CCC"},
    {"Idx":9, "Col1": "09A","Col2":"09BB","Col3":"09CCC"},
    {"Idx":10, "Col1": "10A","Col2":"10BB","Col3":"10CCC"},
    {"Idx":11, "Col1": "11A","Col2":"11BB","Col3":"11CCC"},
    {"Idx":12, "Col1": "12A","Col2":"12BB","Col3":"12CCC"},
    {"Idx":13, "Col1": "13A","Col2":"13BB","Col3":"13CCC"},
    {"Idx":14, "Col1": "14A","Col2":"14BB","Col3":"14CCC"},
    {"Idx":15, "Col1": "15A","Col2":"15BB","Col3":"15CCC"},
    {"Idx":16, "Col1": "16A","Col2":"16BB","Col3":"16CCC"},
    {"Idx":17, "Col1": "17A","Col2":"17BB","Col3":"17CCC"},
    {"Idx":18, "Col1": "18A","Col2":"18BB","Col3":"18CCC"}
    ];

theGrid.setData(dataRows);



$("#container").removeClass("displayNone");


}

</script>

</head>

<body>

 <div id="theTop">

  <p>Content Above Grid</p>

  <p id="notice">Grid was loaded while #container was "display:none".  Scrollbar placement is wrong.</p>

 </div>

 <div id="container" class="displayNone">

  <table id="DNGrid"></table>



  <p>Other Content Below Grid: Part of the div #container default of display:none</p>

  <p><button onclick="reloadGrid()">Reload Grid</button></p>

  </div>

</body>

</html>

我有很多jqui .tabs和许多网格。正如目前实现的那样，没有逻辑直接关联哪些网格在哪些选项卡上，因此当它们（选项卡）变为显示时，使这种关联只调用修复...例程是很多工作：阻止，特别是当所有free-jqgrid之前的jqgrid版本只是简单的工作

加载的free-jqgrid网格内容显示：无垂直滚动条始终遮挡最后一列

0 个答案: