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

作者: 天线宝宝
发布时间: 2025-03-07 12:39:11 (4天前)
转自：

8 条回复

0#
回复此人
Let us fly | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 为我解决了这个问题。这就是我在做的事情： 1.初始化网格 2.将数据附加到其中 3.使用包含网格的div的模态来呈现它 </p> <P> 为了解决我这样做了： 1.使用包含网格的div的模态来呈现它 2.初始化网格 3.附加数据 </p> </DIV>

编辑
1#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我能够在bootstrap 3（一个环境中）中使用它 <code> box-sizing </code> 被设置为 <code> border-box </code> ）只是通过申请 <code> box-sizing: content-box </code> 到了 <code> .slick-header-column </code> 。 </p> <pre class="lang-css prettyprint-override"> <code> .slick-header > .slick-header-columns > .slick-header-column { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } </code> </pre> <HR /> <P> 修改时要小心 <code> border </code> 的性质 <code> .slick-header-column </code> 。我可以通过设置颜色来删除右边的边框 <code> transparent </code> ： </p> <pre class="lang-css prettyprint-override"> <code> .slick-header > .slick-header-columns > .slick-header-column:last-child { border-right-color: transparent; } </code> </pre> <P> 的<strong> <EM> 注意 </EM> </强> <EM> ：你可以使用选择器特性 - 你要覆盖的选择器是： </EM> </p> <pre class="lang-css prettyprint-override"> <code> .slick-header-column.ui-state-default { ... } </code> </pre> </DIV>

编辑
2#
回复此人
只怕再见是故人 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这些解决方案都不适用于我，可能是因为SlickGrid的代码自2012年以来发生了变化:) 我找到了解决方案 <a href="http://technotes.zettlemoyer.com/post/53785064701/get-slickgrid-to-render-properly-when-box-sizing-is-set" rel="noreferrer"> 岗位 </A> ，它与@ Wex相似，但差别很小： </p> <pre> <code> .slickgrid, .slickgrid *, .slick-header-column { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } </code> </pre> <P> 哪里 <code> .slickgrid </code> 是网格容器元素的选择器。 </p> </DIV>

编辑
3#
回复此人
࿏自ོ༾由ོ༽人͙⃡⌇ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是支持的，不应该发生。事实上，大多数例子（包括 <a href="http://mleibman.github.com/SlickGrid/examples/example1-simple.html" rel="nofollow"> http://mleibman.github.com/SlickGrid/examples/example1-simple.html </A> ）具有相同的实现只是为了确保它正常工作。 </p> <P> 你能加一个jsfiddle.net repro吗？ </p> </DIV>

编辑
4#
回复此人
日耀九洲 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用JQuery动态显示/隐藏网格时遇到了类似的问题 <code> .show() </code> 和 <code> .hide() </code> 。 </p> <P> 如果你创建了 <code> div </code> 标记 <code> display: none </code> （因此它最初是隐藏的）网格列不能正确初始化。为了解决这个问题，我创建了div标签 <code> visibility: hidden </code> 并在使用之前删除此样式 <code> .hide() </code> 和 <code> .show() </code> 方法。 </p> <P> 我的代码看起来大致如下： </p> <pre> <code> <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(); </code> </pre> <P> 一旦它被初始化和 <code> visibility: hidden; </code> 财产被删除，我正在使用 <code> .hide() </code> 和 <code> .show() </code> 但我怀疑如果你操纵它会有效 <code> display: none; </code> 如果您不使用JQuery，则直接归属。 </p> <P> 希望这可以帮助。 </p> </DIV>

编辑
5#
回复此人
撩心 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我有完全相同的问题，在阅读了@Premanshu和@Tin的答案后，我发现了一条不同的路线来解决它。 </p> <P> 基本上你需要跳过一个事件周期，让DOM在你显示网格之前赶上来，这样就可以找到合适的列宽。我用setTimeout来做。 </p> <pre> <code> 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); </code> </pre> </DIV>

编辑
6#
回复此人
圈圈红 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我在使用twitter bootstrap css的页面上使用它时遇到了类似的问题。解决方案是将框大小覆盖到内容框 </p> <P> *，*：之前，*：之后{ -webkit-box-sizing：content-box; -moz-box-sizing：content-box; box-sizing：content-box; } </p> <P> 可能应该弄清楚究竟哪些类真正需要它，但这对我来说是有条不紊的。 </p> </DIV>

编辑

登录后才能参与评论