dgrid與水平滾動

我有一個dgrid在包含許多列的表中顯示數據。 dgrid的默認佈局會使所有列在頁面上可見，這意味着它們已摺疊並且無法在每列中看到完整的標題或數據。dgrid與水平滾動

Table with default layout

我想顯示所有列擴大到看到所有包含在其中的數據和頭信息。然後，我需要一個水平滾動條來側向滾動查看所有列。我能夠通過將dgrid-row-table的默認佈局從table-layout: fixed更改爲table-layout: auto來完成此操作，但是這些列未排列。

Table with full columns that don't line up

是否有使用dgrid/OnDemandGrid有許多列和水平滾動的方式？

來源

2013-01-24 Brian

我的解決方案不使用dgrid/OnDemandGrid，但仍然有效。

1 /放網格在容器這樣的：

<div id="container"> 
    <div id="grid" style="width:100%;height:100%"></div> 
</div>

2 /設定寬度，高度和在CSS滾動：

#container{ 
    height: 200px; 
    width: 800px; 
    overflow: auto; 
}

3 /在網格的結構放元件「寬度」爲「自動」：

var gridLayout = [ 
        { 
         defaultCell: { width: 8, editable: false, type: cells._Widget, styles: 'text-align: right;' }, 
         cells: [ 
           { name: "ID"    , field: "id"   , width: "auto" }, 
           { name: "Reg."    , field: "reg"   , width: "auto", editable: true }, 
           { name: "Type"    , field: "type"   , width: "auto" } 
        ];

（例如）

行的大小足以顯示其最大內容，div容器將滾動。

希望它會有所幫助。

來源

2013-01-25 13:03:23 tufekoi

這可以用dgrid做例子。看到我的回答如下 –

dGrid支持開箱即用。你所需要做的就是爲dgrid設置一個寬度，併爲每一列設置一個最小值。如果列的寬度比dgrid的寬度，將水平滾動：

JS小提琴 http://jsfiddle.net/e9jad/7/

.dgrid-grid { 
    width: 100% 
} 
.dgrid-cell { 
    width: 400px; 
}

記住dgrid的HIGHT被默認設置爲30em所以你可能想要改變這個，或者滾動可能不在你的控制的底部。你

也可以看到在道場測試 http://dojofoundation.org/packages/dgrid/js/dgrid/test/widths.html

來源

2014-03-31 08:30:29

你提到CSS文件在小提琴 - 你能包括一個鏈接？我試圖在我的dgrid上獲得汽車高度，這讓我瘋狂！ – streetlight

@streetlight這種情況是關於水平滾動的。有關自動高度，請參閱http://www.sitepen.com/blog/2012/05/03/css-styling-of-dgrid/ –

dgrid與水平滾動

回答

相關問題