表列调整大小/拖放'n'在jQuery中删除

Question

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

有没有人知道任何可能帮我这么做的插件，如果没有，那里有没有解决过这个问题的jQuery Gurus？

Answer 1

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

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

调整列的大小

我会使用带有table-layout: fixed标记的css <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>元素。 <div>元素中的上述<th>可能具有可放置的行为。这样，您可以将任何列拖到其中一个div上并将其放在它们上面。当列拖动到div的顶部时，div应该变为可见，并且可能是列的高度。

一旦用户将列标题放到其中一个缩放器栏div上，您就需要遍历表格的每一行并将相应的<td>移动到正确的位置。不要忘记移动相应的<col>和<th>。

我希望这会让你前进。如果你看起来足够努力的话，我肯定会有某些例子。但是大多数网格控件确实具有比实际使用更多的功能，听起来你宁愿保持简单。

更新

我刚刚进行了快速谷歌搜索，找到了this plugin。我还没有看过源代码，但是从演示中看，它看起来像我建议采用类似的方法。它似乎可以完成这项工作，但在我看来它并不是很漂亮。缩放器栏不符合您的预期等等。但它可能有所帮助。