Jquery jqgrid中未填充数据的滚动条

我试图使用jqgrid创建一个网格，它最初没有数据，但有一个固定的大小，其中列的总宽度大于网格的宽度，因此用户只能滚动标题。用户将单击一个按钮，将数据填充到网格中。这听起来可能与已经回答的问题类似

然而，在这种情况下，数据已经存在。我最初没有数据，希望网格有滚动条。我注意到，在填充数据之前，不会创建class.ui jqgrid bdiv的div

这是jqgrid中的一个bug吗？有什么解决办法吗

这是小提琴

代码如下：

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]);*/
        });

$（文档）.ready（函数（）{
$（“#结果”）.jqGrid({
数据类型：“本地”，
身高：150，
卷轴：没错，
宽度：300，
shrinkToFit：错，
ColName:['Inv No'，'Date'，'Client'，'Amount'，'Tax'，'Total'，'Notes']，
colModel：[
{name:'id'，index:'id'，width:160，sorttype:'int}，
{name:'invdate'，index:'invdate'，宽度：90，排序类型：“date”}，
{name:'name'，index:'name'，宽度：100}，
{name:'amount'，index:'amount'，width:80，align:“right”，sorttype:“float”}，
{name:'tax'，index:'tax'，宽度：180，对齐：“right”，排序类型：“float”}，
{name:'total'，index:'total'，宽度：280，对齐：“right”，排序类型：“float”}，
{name:'note'，index:'note'，宽度：150，可排序：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”，note2，amount:“300.00”，tax:“20.00”，total:“320.00”}，
{id:“3”，invdate:“2007-09-01”，name:“test3”，note3，amount:“400.00”，tax:“30.00”，total:“430.00”}，
{id:“4”，投资日期：“2007-10-04”，名称：“测试”，注：“注”，金额：“200.00”，税款：“10.00”，总额：“210.00”}，
{id:“5”，invdate:“2007-10-05”，name:“test2”，note2，amount:“300.00”，tax:“20.00”，total:“320.00”}，
{id:“6”，invdate:“2007-09-06”，name:“test3”，note3，amount:“400.00”，tax:“30.00”，total:“430.00”}，
{id:“7”，投资日期：“2007-10-04”，名称：“测试”，注：“注”，金额：“200.00”，税款：“10.00”，总额：“210.00”}，
{id:“8”，invdate:“2007-10-03”，name:“test2”，note2，amount:“300.00”，tax:“20.00”，total:“320.00”}，
{id:“9”，invdate:“2007-09-01”，name:“test3”，note3，amount:“400.00”，tax:“30.00”，total:“430.00”}
];
//如果取消对此的注释，将显示滚动条
/*对于（var i=0；i，要在垂直滚动期间保持标题可见，请参见Oleg的回答：

要启用标题滚动，您可以在load complete中执行此操作

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

    }//loadComplete

要在垂直滚动期间保持标题可见，请参见Oleg的回答：

要启用标题滚动，您可以在load complete中执行此操作

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

    }//loadComplete

@用户1719160：

loadComplete: function () {

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

这很有效…不是很优雅…但它确实有效。
@user1719160:

loadComplete: function () {

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

这很有效…不是很优雅…但它确实有效。
这是我在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>")
    }        
},

loadComplete:函数（）{
if（$（this）.jqGrid（'getGridParam'，'reccount'）==0）
{                
$（“#网格>正文”）。追加（“”）
}        
},
这是我在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>")
    }        
},

loadComplete:函数（）{
if（$（this）.jqGrid（'getGridParam'，'reccount'）==0）
{                
$（“#网格>正文”）。追加（“”）
}        
},
我知道这是一个老问题，但如果其他人遇到它，以下代码对我很有效（将grid\u client更改为正确的名称）：

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

希望这对其他人有帮助！
我知道这是一个老问题，但如果其他人遇到它，以下代码对我很有效（将grid\u client更改为正确的名称）：

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

希望这对其他人有帮助！
整个div都会有滚动条，但问题是在填充数据时，标题也会随数据一起滚动。标题不会像我不想要的标题一样。所以你希望jqGrid的标题保持静态，数据列滚动？是的，准确地说。另外，当数据不在那里，标题应该是可见的。我可以问一下，在滚动下面的数据时保持标题静态对用户来说有什么意义吗？在您的示例中，在加载数据之前，标题是可见的。所谓静态，我的意思是标题应该保持为一个单独的部分，并且始终可见，因为当用户滚动数据时，他知道是什么t列属于哪个标题。所以如果您检查这个更新的fiddl