代码之家 › 专栏 › 技术社区 › Matt Weldon

在jquery中调整表列大小/拖放“n”

drag-and-drop sorting jquery

Matt Weldon · 技术社区 · 14 年前

我正在寻找一种方法来实现使用jquery对预定义表中的列(而不是行)进行大小调整和拖放。我做了一些谷歌搜索,没有真正找到任何符合账单要求的东西,因为很多人都要求您使用jquery实质上重新构建表。我只是想插入这个功能,而不是让我的整个表结构由第三方控制。

有人知道有什么插件可以帮助我做到这一点吗?如果没有,是否有任何jquery专家已经解决了这个问题?

1 回复 | 直到 8 年前

Tauren 14 年前

所以我认为你对现有的一个网格插件不感兴趣,比如 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可拖动行为应用于该分区。拖动该分区时,更新 <COL> 宽度合适。如何调整大小取决于您的需要,可能需要一些数学知识。

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

拖放列

这可能更棘手。我首先将可拖动的行为应用于 <TH & GT; 元素。这个 <DIV & GT; 上面描述的 <TH & GT; 元素可以具有可拖放的行为。这样,您可以将任何列拖到其中一个div上,并将其放到其中一个div上。当一列拖到一个DIV的顶部时,该DIV应该可见,并且可能是该列的高度。

一旦用户将列标题放到其中一个大小调整器条分隔上,您将需要循环遍历表的每一行并移动适当的 <td> 到正确的位置。别忘了移动合适的 <COL> 和 <TH & GT; 也。

我希望这能让你走。如果你足够努力的话,我相信在某些地方会有这样的例子。但是大多数网格控件确实比我实际使用的功能多得多,而且听起来你更愿意保持简单。

更新

我刚刚做了一个快速的谷歌搜索,发现 this plugin . 我还没有看过源代码,但是从演示中可以看出,它采用了类似于我建议的方法。它似乎能胜任这项工作,但在我看来,它看起来不太漂亮。大小调整器栏不符合您期望的位置等。但这可能会有所帮助。