在 jQuery 中调整表列大小/拖放“n”答案

【问题标题】：Table Column Resizing/Drag 'n' Dropping in jQuery在 jQuery 中调整表列大小/拖放“n”
【发布时间】：2010-05-25 14:59:50
【问题描述】：

我正在寻找一种方法来使用 jQuery 在预定义的表中实现列（而不是行）的大小调整和拖放。我做了一些谷歌搜索，并没有真正找到符合要求的任何东西，因为许多要求你基本上使用 jQuery 重建你的表。我只是想插入这个功能，而不是让第三方指定我的整个表结构。

有谁知道任何可以帮助我做到这一点的插件，如果没有的话，是否有任何 jQuery Gurus 已经解决了这个问题？

【问题讨论】：

标签： jquery sorting drag-and-drop

【解决方案1】：

所以我认为您对jqGrid 等现有网格插件之一不感兴趣？我建议查看他们的实现以了解他们如何拖放列。

我没有执行此操作的特定代码，但这是我对如何解决该问题的初步想法。

调整列的大小

我会使用 css table-layout: fixed 和 <col> 标签来定义列宽。这样你的jquery代码只需要在一个地方改变宽度值，列中的所有单元格都会调整宽度。

<table width="100%" cellspacing="0"> 
    <col width="25%"> 
    <col width="25%"> 
    <col width="25%"> 
    <col width="25%"> 
    <tr>...</tr>
</table>

使用 CSS 将不可见的窄 div 浮动到每个标题单元格的右侧：<th>Title<div class="resizer"></div></th>。这个<div> 成为您的调整器句柄，您可能希望在其上添加 CSS 以更改悬停时的鼠标光标。您甚至可以使用 CSS 将其稍微向右移动，使其与列之间的边框重叠。

然后将 jQuery UI 可拖动行为应用到该 div。拖动 div 时，适当更新 <col> 宽度。如何调整大小取决于您的需求，并且可能需要一点数学知识。

或者，当拖动不可见的 div 时，您可以将其转换为绝对定位的窄 div，该 div 会增加到表格的高度。您需要在拖动鼠标时移动它，并使其可见以指示您将列调整到的位置。然后在调整大小完成后，重新计算 <col> 大小并应用它们，将高度改回仅适合 <th>，并使其不再可见。

拖放列

这可能更棘手。我将首先将可拖动行为应用于<th> 元素。上面在<th> 元素中描述的<div> 可能具有可放置的行为。这样，您可以将任何列拖到其中一个 div 上并将其放在它们上面。当一列被拖到一个 div 的顶部时，该 div 应该变得可见，并且可能是该列的高度。

一旦用户将列标题拖放到这些调整大小栏 div 之一上，您就需要遍历表格的每一行并将适当的 <td> 移动到正确的位置。不要忘记移动相应的<col> 和<th>。

我希望这会让你继续前进。如果你足够努力的话，我敢肯定在某个地方会有这样的例子。但大多数网格控件的功能确实比我实际使用的要多得多，而且听起来你宁愿保持简单。

更新

我刚刚做了一个快速的谷歌搜索，发现this plugin。我还没有查看源代码，但从演示来看，它似乎采用了与我所建议的方法类似的方法。它似乎完成了这项工作，但在我看来，它看起来并不漂亮。大小调整栏没有排列在您期望的位置等等。但这可能会有所帮助。

【讨论】：

感谢您的建议，我也遇到过DragTable，它与 columnSizing 插件结合使用应该能够满足我的要求。不幸的是，它不是 jQuery，但它至少能让球滚动起来！
使用 jquery 更新 col 宽度的正确方法是什么？