jQuery BootGrid - 从 DOM 中删除带有 data-visible="false" 的隐藏列答案

【问题标题】：jQuery BootGrid - Hiding columns with data-visible="false" removes from DOMjQuery BootGrid - 从 DOM 中删除带有 data-visible="false" 的隐藏列
【发布时间】：2017-12-14 06:59:17
【问题描述】：

使用 BootGrid，您可以通过在第列定义中使用 data-visible="false" 来隐藏列。这会产生一个问题，它似乎将其从 DOM 中移除，而不是仅仅隐藏该列。列（前两个不显示）

<tr>
    <th data-column-id="id" data-type="numeric" data-identifier="true" data-visible="false">ID</th>
    <th data-column-id="User" data-visible="false">User</th>
    <th data-column-id="Title">Title</th>
    <th data-column-id="Description">Description</th>
    <th data-column-id="Expire" data-formatter="expire" data-sortable="true">Expire</th>
    <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
</tr>

问题将 ID 和 User 设置为 data-visible="False" 他们的值是不可访问的。使用 data-visible="false" 似乎使这些字段完全不存在。我需要能够访问这些值。

【问题讨论】：

当然，像 BootGrid 一样流行，我想以前有人解决过这个问题。在我的书中，这是一个相当大的设计缺陷，否则是一大段代码。或者也许有人知道会更好地工作的 jQuery 网格结构。还是我应该硬着头皮自己写？

标签： jquery twitter-bootstrap dom visibility

【解决方案1】：

有两个数据参数：header-css-class 和 css-class，我阅读的文档中没有很好地解释其用法。我用 display:none 设置了两个类，我将它们命名为“Hidecolhead”和“HideCol”。然后，在我不想在网格中显示的列（ID 和用户）中，我有

<th data-column-id="ID" data-header-css-class="HideColHead" data-css-class="HideCol">ID</th>
<th data-column-id="User" data-header-css-class="HideColHead" data-css-class="HideCol">User</th>

这些行列中的值现在可用。

【讨论】：