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

Question

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

有没有人知道任何可能帮助我这样做的插件,如果没有,是否有任何jQuery专家已经解决了这个问题？

Answer 1

所以我认为你对一个现有的网格插件如jqGrid不感兴趣？我建议看看他们的实现,以了解他们如何拖放列.

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

调整列的大小

我会使用table-layout: fixed带<col>标签的css 来定义列宽.这样你的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>也.

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

UPDATE

我只是做了一个快速的谷歌搜索,发现了这个插件.我还没有看过源代码,但是从演示中看,它看起来像我建议采用类似的方法.它似乎可以完成这项工作,但在我看来它并不是很漂亮.缩放器栏不符合您的预期等等.但它可能有所帮助.