沒有數據填充的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中的滾動條

回答

相關問題