漂亮的網格標題行單元格對齊

我正在使用漂亮的網格在網格中顯示數據。平滑的網格計算所有的東西，如創建特定網格時的高度和寬度，網格看起來非常精細。當網格被創建但是被隱藏並且在其他東西的操作中（複選框/單選按鈕選擇），網格變得可見。這次計算出錯了，並且標題和行單元格（標題的列）沒有垂直對齊。 enter image description here 漂亮的網格標題行單元格對齊

我無法理解如何控制此操作。如果其他人也受到光滑網格的困擾，並且能夠爲自己辯護，請裸露彈藥。

在預期， Premanshu

來源

2011-12-19 Premanshu

我有類似的問題，當動態顯示/隱藏使用JQuery .show()和.hide()網格。

如果創建div標籤與display: none（所以它最初是隱藏的）格列不正確初始化。要解決這個問題，我使用visibility: hidden創建div標籤，並在使用.hide()和.show()方法之前刪除此樣式。

我的代碼看起來大致是這樣的：

<div id="mygrid" style="visibility: hidden"></div> 

    $grid = $("#mygrid") 

    grid = new Slick.Grid($grid, gridData, gridColumns, gridOptions); 

    // Hide grid by default, remembering to remove the visibility style 
    $grid.hide(); 
    $grid.css("visibility", "visible"); 

    // You can now show and hide the grid using normal jQuery methods 
    $grid.show(); 
    $grid.hide();

一旦被初始化和visibility: hidden;財產被刪除，我使用.hide()和.show()但我懷疑這一點，如果你操作display: none;如果直接將屬性工作你沒有使用JQuery。

希望這會有所幫助。

來源

2011-12-19 14:05:51 njr101

@ njr ..感謝您的回覆......但不知何故，這種解決方法似乎並不足以解決問題。！[問題中的圖片]（C：\ Users \ premanshu \ Desktop \ slick alignment1 是我在使用您的回覆之後得到的結果。 – Premanshu 2011-12-20 05:27:47

我還在標題中添加了一些自定義類，看起來這是我在jsfiddle中嘗試了一個使用你的方法，並且它工作正常。 http://jsfiddle.net/wLPLA/13/ – Premanshu 2011-12-20 09:02:47

在你的jsFiddle中，你有用'display：none'定義的網格HTML標記。嘗試使用'visibility：hidden'代替 – njr101 2011-12-20 09:12:47

這是支持的，不應該發生。實際上，大多數示例（包括http://mleibman.github.com/SlickGrid/examples/example1-simple.html）都具有相同的實現，以確保其正常工作。

你能包括一個jsfiddle.net repro？

來源

2011-12-19 18:26:11 Tin

如果網格在頁面加載時初始化並可見，則它完全正常。但是，如果網格初始化並且在頁面加載時不可見，則它不起作用。 – Premanshu 2011-12-20 06:05:33

小提琴在jsfiddle.net/wLPLA/18 但問題不在那裏...... – Premanshu 2011-12-20 10:25:21

在版本1.4.2中是否支持？我使用該版本作爲基準，並在其基礎上存在我的定製。 – Premanshu 2011-12-20 12:48:24

我有完全相同的問題，在閱讀@Premanshu和@Tin的答案後，我找到了一條不同的途徑來解決它。

基本上你需要跳過一個事件循環，並讓DOM在顯示網格之前趕上，這將使它能夠找到正確的列寬。我用setTimeout來做到這一點。

var myGrid = $("<div id='myGrid' style='width:600px;height:500px;'></div>"); 
    grid = new Slick.Grid(myGrid, data, columns, options); 


    // ... later on, append the container to the DOM and initialize SlickGrid 
    setTimeout(function(){ 
    myGrid.appendTo(that.$el); 
    grid.init(); 
    },1);

來源

2012-12-18 02:07:48 James

我有一個類似的問題，當它在一個頁面上有twitter引導css就可以了。解決方案是覆蓋箱子大小到內容框

*，*：before，*：after { -webkit-box-sizing：content-box; -moz-box-sizing：content-box; box-sizing：content-box; }

可能應該找出究竟哪些類真的需要它，但是這對我來說是有序的。

來源

2013-09-12 15:07:14

最好只是重寫的子元素。網格，否則你可以影響Bootstrap，它期望處理邊框大小。例如。 '.grid *，.grid：之前*，.grid：之後* { \t -webkit-box-sizing：content-box; \t -moz-box-sizing：content-box; \t box-sizing：content-box; }' – IlluminAce 2013-10-20 03:38:19

只需將box-sizing: content-box應用於.slick-header-column，我就能夠在引導程序3（環境中box-sizing設置爲border-box）中使其工作。

.slick-header > .slick-header-columns > .slick-header-column { 
    -webkit-box-sizing: content-box;                
    -moz-box-sizing: content-box; 
    box-sizing: content-box; }

修改的.slick-header-column的border屬性時，只是要小心。我可以通過設置顏色，除去邊框右側，以transparent：

.slick-header > .slick-header-columns > .slick-header-column:last-child { 
    border-right-color: transparent; 
}

注：你可以玩的選擇特殊性 - 你覆蓋選擇是：

.slick-header-column.ui-state-default { ... }

來源

2014-04-18 21:12:52 Wex

這對我來說非常合適。 – AndeeC 2015-12-01 18:53:45

這些解決方案的工作對我來說，可能是因爲2012年以來SlickGrid的代碼改變了:) 我發現這個post的解決方案，它類似於@ WEX的，但有微小的差異：

.slickgrid, 
.slickgrid *, 
.slick-header-column { 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
}

凡.slickgrid是網格容器元件的選擇器。

來源

2014-06-02 12:46:14 coquin

爲我解決了它。這是我在做什麼： 1.初始化電網 2.追加數據，將其 3.目前，它使用包含分區電網的模式

要解決我這樣做：1。目前，它採用div的模態包含網格 2.初始化網格 3.追加數據

來源

2014-10-16 05:43:31

漂亮的網格標題行單元格對齊

回答

相關問題