光滑的网格标题行单元格对齐

Question

我正在使用光滑的网格在网格中显示数据。光滑的网格计算所有的东西，如高度，宽度，特定网格创建和网格看起来非常好。 当网格被创建但被隐藏并且在其他东西的行动（复选框/单选按钮选择）时，网格变得可见。这次计算出错了，标题和行单元格（标题的列）没有垂直对齐。

我无法理解如何控制它。如果其他任何人也在光滑的网格上受到伤害并且能够为自己辩护，请展开弹药。

期待中， Premanshu

Answer 1

这些解决方案都不适合我，可能是因为SlickGrid的代码自2012年以来发生了变化:) 我在post中找到了一个解决方案，与@ Wex相似，但差异很小：

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

其中.slickgrid是网格容器元素的选择器。

Answer 2

我只需将box-sizing应用于border-box，就可以在bootstrap 3（box-sizing: content-box设置为.slick-header-column的环境）中使用此功能。

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

---

修改border的{​​{1}}属性时要小心。我可以通过将颜色设置为.slick-header-column来删除右边的边框：

transparent

注意 ：您可以使用选择器特性 - 您要覆盖的选择器是：

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

Answer 3

在使用twitter bootstrap css的页面上使用它时遇到了类似的问题。解决方案是将框大小覆盖到内容框

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

可能应该确切地确定哪些类确实需要它，但是这对我来说是分类的。

Answer 4

使用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。

希望这有帮助。

Answer 5

我遇到了完全相同的问题，在阅读了@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);

Answer 6

这是支持的，不应该发生。事实上，大多数示例（包括http://mleibman.github.com/SlickGrid/examples/example1-simple.html）都具有相同的实现，只是为了确保它正常工作。

你能加一个jsfiddle.net repro吗？

Answer 7

为我解决了这个问题。 这就是我在做的事情： 1.初始化网格 2.将数据附加到其中 3.使用包含网格的div的模态

来呈现它

要解决我这样做了： 1.使用包含网格的div的模态来呈现它 2.初始化网格 3.附加数据