jquery - 表列调整大小/拖动 'n' 在 jQuery 中放置

Question

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

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

Answer 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 float 到每个标题单元格的右侧:<th>Title<div class="resizer"></div></th> 。这个<div>成为你的缩放 handle ，你会想要在它上面有 CSS 来改变悬停时的鼠标光标。您甚至可以使用 CSS 将其向右微移一点，使其与列之间的边框重叠。

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

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

拖放列

这可能会更棘手。我首先将可拖动行为应用于 <th>元素。 <div>上面描述的 <th>元素可以具有可放置的行为。这样你就可以将任何列拖到这些 div 之一上并将其放在上面。当将一列拖到 div 顶部时，div 应该变得可见，也许还有列的高度。

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

我希望这能让你继续前进。我相信如果你仔细观察的话，在某个地方肯定有这样的例子。但大多数网格控件的功能确实比我实际使用的功能多得多，而且听起来您宁愿让事情变得简单。

更新

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