表列大小调整/拖动'；n'；放入jQuery

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

---

有人知道有什么插件可以帮助我做到这一点吗？如果没有，有没有jQuery专家已经解决了这个问题？

所以我想你对现有的网格插件不感兴趣，比如？我建议查看它们的实现，了解它们是如何拖放列的

我没有具体的代码来做这件事，但这里是我对如何解决这个问题的初步想法

调整列的大小 我会使用css

表布局：fixed

和

标记来定义列宽。这样，jquery代码只需要在一个位置更改宽度值，列中的所有单元格都将调整宽度

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

...

使用CSS将不可见的窄div浮动到每个标题单元格的右侧：

Title

。这个

将成为您的大小调整器句柄，您需要在其上使用CSS来更改鼠标光标悬停。您甚至可以使用CSS将其向右移动一点，使其与列之间的边框重叠

然后将jQuery UI可拖动行为应用于该div。拖动div时，适当地更新

宽度。如何调整大小取决于您的需要，可能需要一点数学知识

或者，当拖动不可见div时，可以将其转换为绝对定位的窄div，该div增加到表格的高度。拖动鼠标时需要移动它，并使其可见，以指示要调整列大小的位置。然后，一旦完成大小调整，您将重新计算并应用

尺寸，将高度更改回仅适合

的尺寸，并使其不再可见

拖放列 这可能更棘手。我将首先将可拖动行为应用于

元素。上述

元素中的

可能具有可拖放行为。通过这种方式，您可以将任何列拖到这些div中的一个上，然后将其放到上面。当在div顶部拖动一列时，div应该是可见的，可能还有列的高度

一旦用户将列标题放到这些调整器条div中的一个上，您就需要遍历表的每一行，并将相应的

移动到正确的位置。不要忘记移动相应的

和

我希望这能让你走。如果你仔细看的话，我相信在某些地方会有这样的例子。但大多数网格控件的功能确实比我实际使用的要多得多，而且听起来你更希望保持简单

更新

---

我只是在谷歌上快速搜索了一下，找到了。我还没有看过源代码，但从演示来看，它似乎采用了与我建议的类似的方法。它似乎很管用，但在我看来它看起来不太漂亮。“大小调整器”栏没有与您期望的位置对齐等等。但是这可能会有所帮助。

谢谢你的建议，我还遇到了一些与Columnsize插件结合使用时应该能够满足我的要求的建议。不幸的是，它不是jQuery，但它至少能让事情顺利进行！使用jquery更新列宽度的正确方法是什么？