jQuery中的表格列调整大小/拖放

Question

jQuery中的表格列调整大小/拖放

5

我正在寻找一种使用jQuery来预定义表格的方式实现列（而非行）大小调整和拖放的方法。我搜索了一下但并没有找到符合要求的内容，因为很多方法都需要使用jQuery重新构建整个表格结构。我只是想简单地添加这些功能，而不是让第三方完全控制我的整个表格结构。

请问有没有任何插件可以帮助我完成这个任务？如果没有，那么有没有什么jQuery大牛已经解决了这个问题呢？

- Matt Weldon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tauren · Accepted Answer

我猜你对于现有的网格插件，例如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，它的高度增加到表格的高度。当鼠标拖动时，您需要移动它，并使其可见以指示您正在调整列的大小。然后一旦调整大小完成，您需要重新计算<col>的大小并应用它们，将高度改回仅适合于<th>，并再次使其不可见。

拖放列

这可能会更加棘手。我会从将可拖动行为应用于<th>元素开始。上面描述的<div>在<th>元素中，可以具有可放置行为。这样，您就可以将任何列拖动到这些div之一上并将其放下。当一列被拖到一个div上方时，该div应该变得可见，可能是列的高度。

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

希望这能让您开始。我相信如果您努力寻找，一定会找到这方面的例子。但是大多数网格控件都具有比我实际使用的功能更多，而且听起来您更喜欢保持简单。

更新

我刚刚进行了快速的谷歌搜索，并发现了这个插件。我还没有查看源代码，但从演示中看来，它采用了类似于我建议的方法。它似乎做得很好，但我认为它看起来不太好看。调整大小的条形不会对齐在您期望的位置等等。但它可能会有所帮助。