没有数据填充的jqgrid中的滚动条

我想用jqgrid创建一个最初没有数据但具有固定大小的网格，其中列宽总大于网格宽度，以便用户只能滚动通过标题。用户将点击一个按钮，将数据填入网格中。这听起来可能类似于已经回答的问题jqGrid vertical scrollbar 没有数据填充的jqgrid中的滚动条

但是，在那种情况下，数据已经存在。我最初没有数据，并希望网格具有滚动条。我注意到，具有类.ui-jqgrid-bdiv的div在创建数据之前并不会被创建。

这是jqgrid中的错误吗？有没有解决方法？

这里是小提琴http://jsfiddle.net/yNw3C/2630/

这里是代码：

的javascript

$(document).ready(function() { 
    $("#results").jqGrid({ 
     datatype: "local", 
     height: 150, 
     scroll:true, 
     width:300, 
     shrinkToFit:false, 
     colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'], 
     colModel: [ 
      { name: 'id', index: 'id', width: 160, sorttype: "int" }, 
      { name: 'invdate', index: 'invdate', width: 90, sorttype: "date" }, 
      { name: 'name', index: 'name', width: 100 }, 
      { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" }, 
      { name: 'tax', index: 'tax', width: 180, align: "right", sorttype: "float" }, 
      { name: 'total', index: 'total', width: 280, align: "right", sorttype: "float" }, 
      { name: 'note', index: 'note', width: 150, sortable: false } 
      ], 
     }); 
      var mydata = [ 
          { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
          { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
          { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
          { id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
          { id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
          { id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
          { id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
          { id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
          { id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" } 
          ]; 
      //if you uncomment this, the scrollbars would appear 
      /*for (var i = 0; i <= mydata.length; i++) 
       $("#results").jqGrid('addRowData', i + 1, mydata[i]);*/ 
     });

HTML

<div> 
    <table id="results"></table> 
</div>

编辑：更清楚，在上述的例子，我想横向滚动h标题。填充数据时，标题在垂直滚动时应保持静态，并与数据一起水平滚动。

谢谢！

来源

2013-05-02 user1719160

与mydata相比，列声明不同。 – pudaykiran 2014-02-19 13:00:20

要垂直滚动时保持标题可见看到奥列格的回答为： fixing column headers while scrolling - jqgrid

为了使头滚动，你可以做到这一点的负荷完全

loadComplete: function() { 
     if ($(this).jqGrid('getGridParam', 'reccount') == 0){ 
      $(".ui-jqgrid-hdiv").css("overflow-x", "auto") 
     } 
      else{ 
       $(".ui-jqgrid-hdiv").css("overflow-x", "hidden") 
      } 

    }//loadComplete

来源

2013-05-02 13:59:28 Mark

那么，将滚动整个div，但问题是，数据填充时，标题也会滚动数据。标题不会像我不想要的标题。 – user1719160 2013-05-02 14:27:31

所以你想让jqGrid的头部保持静态并滚动数据列？ – Mark 2013-05-02 14:29:56

是的，确切地说。另外，当数据不存在时，标题应该可见。 – user1719160 2013-05-02 14:35:40

@ user1719160：

loadComplete: function() { 

     if ($(this).jqGrid('getGridParam', 'reccount') == 0) 
     {   
      $(".jqgfirstrow").css("height","1px"); 
     }

这个作品...不是很优雅......但它的工作。

来源

2013-10-01 19:56:32 dsjaramillo

这是我在没有数据时在jqgrid中为hbar找到的最终解决方案。

loadComplete: function() { 
    if ($(this).jqGrid('getGridParam', 'reccount') == 0) 
    {     
     $("#grid > tbody").append("<tr id=\"my_row\" role=\"row\"><td colspan=\"15\" style=\"height:1px;\" role=\"gridcell\"></td></tr>") 
    }   
},

来源

2013-10-02 14:22:22 dsjaramillo

我知道这是一个老问题，但万一别人遇到它，下面的代码工作很适合我（改变grid_client到合适的名称）：

loadBeforeSend: function() { 
    var headerWidth = $('#gview_grid_client .ui-jqgrid-hdiv div:first').width(); 
    $('#gview_grid_client .ui-jqgrid-bdiv div:first').css({ 
     width: headerWidth, 
     height: 1 
    }) 
}

找到解决方案here。这在我的情况下效果很好，因为我的列上有过滤器&需要保持水平滚动位置，如果某人选择过滤器，没有结果，然后取消选择该过滤器以重新填充表格。如果没有添加代码，表格会重新填充并重置左侧滚动条的数据，但标题仍会向右滚动。

希望这可以帮助别人！

来源

2014-04-25 20:30:08 taykay08

没有数据填充的jqgrid中的滚动条

回答

相关问题