漂亮的网格标题行单元格对齐

我正在使用漂亮的网格在网格中显示数据。平滑的网格计算所有的东西，如创建特定网格时的高度和宽度，网格看起来非常精细。当网格被创建但是被隐藏并且在其他东西的操作中（复选框/单选按钮选择），网格变得可见。这次计算出错了，并且标题和行单元格（标题的列）没有垂直对齐。 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

漂亮的网格标题行单元格对齐

回答

相关问题