表列调整大小/拖动'n'在jQuery中删除 [英] Table Column Resizing/Drag 'n' Dropping in jQuery

问题描述

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

I'm looking for a way to implement both resizing and drag 'n' drop for columns (not rows) within a predefined table using jQuery. I've done a bit of Googling and haven't really found anything that fits the bill as many require you to essentially reconstruct your table using jQuery. I simply want to plug this functionality in, not have my entire table structure dictated by a third-party.

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

Does anyone know of any plugins that might help me to do this, and if not are there any jQuery Gurus out there that have solved this problem already?

推荐答案

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

So I take it you are not interested in one of the existing grid plugins such as jqGrid? I would suggest looking at their implementations to get an idea of how they drag/drop columns.

我没有特定的代码来做到这一点，但是这里是我最初的想法如何解决问题。

I'd don't have specific code to do this, but here are my initial thoughts on how to approach the problem.

我将使用css table-layout：fixed with < col> 标签来定义列宽。这样你的jquery代码只需要在一个地方更改宽度值，列中的所有单元格就会调整宽度。

I would use use css table-layout: fixed with <col> tags to define your column widths. This way your jquery code only needs to change the width value in one place and all cells in the column will adjust width.

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

使用CSS将不可见的窄div浮动到每个标题单元格的右侧：< th>标题< div class =resizer>< / div>< / th> 。这个< div> 成为你的resizer句柄，你想要有CSS来改变鼠标光标悬停。您甚至可以使用CSS轻轻地向右移动它，以便它与列之间的边界重叠。

Use CSS to float an invisible narrow div to the right side of each header cell: <th>Title<div class="resizer"></div></th>. This <div> becomes your resizer handle, and you would want to have CSS on it to change the mouse cursor on hover. You could even use CSS to nudge it to the right a little so that it overlaps the border between columns.

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

Then apply jQuery UI draggable behavior to that div. As the div is dragged, update the <col> widths appropriately. How you resize will be dependent on your needs and will probably take a little bit of math.

或者，当隐藏的div被拖动时，您可以将其转换为绝对位于狭​​窄的div，增加到桌子的高度。当您拖动鼠标时，您需要移动它，并使其可见，以指示将列调整大小的位置。然后调整大小后，您重新计算< col> 尺寸并应用它们，将高度更改为仅适用于< th> ; ，并使其不再可见。

Alternatively, when the invisible div is dragged, you could convert it to an absolutely positioned narrow div that increases to the height of the table. You would need to move it when the mouse is dragged, and make it visible to indicate where you are resizing the columns to. Then once the resizing is done, you recalculate the <col> sizes and apply them, change the height back to only fit in the <th>, and make it not visible again.

这可能比较棘手。我将首先将可拖动的行为应用于< th> 元素。 < th> 元素中描述的< div> 可能具有可拔放的行为。这样，您可以将任何列拖放到其中一个div上，并将其放在它们上。当列被拖动到div顶部时，div应该可见，也可能是列的高度。

This could be trickier. I would start by applying the draggable behavior to <th> elements. The <div> described above inside the <th> elements could have a droppable behavior. This way you could drag any column onto one of these divs and drop it on them. When a column is dragged on top of a div, the div should become visible, and maybe the height of the column.

一旦用户将列标题放到这些resizer bar divs，则需要循环遍历表的每一行，并将适当的< td> 移动到正确的位置。不要忘了移动相应的< col> 和< th> 。

Once a user drops a column header onto one of these resizer bar divs, you would then need to loop through each row of the table and move the appropriate <td> to the correct location. Don't forget to move the appropriate <col> and <th> as well.

我希望这会让你走。如果你看起来很硬，我肯定有一些这样的例子。但是大多数网格控件确实有比实际使用的更多的功能，而且听起来你宁愿保持简单。

I hope this will get you going. I'm sure there are examples of this out there somewhere if you look hard enough. But most grid controls do have far more features than I would actual use, and it sounds like you would rather keep things simple.

我刚刚做了一个快速的谷歌搜索，发现这个插件。我还没有看到源代码，但是从演示中，它看起来像采用类似的方式来处理我的建议。这似乎是做这个工作，但在我看来，它看起来不是很漂亮。调整酒吧不符合您期望的地方。但这可能有帮助。

I just did a quick google search and found this plugin. I haven't looked at the source yet, but from the demo, it looks like it takes a similar approach to what I'm suggesting. It seems to do the job, but in my opinion it doesn't look very pretty. The resizer bar doesn't line up where you'd expect and such. But it might help.

这篇关于表列调整大小/拖动'n'在jQuery中删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！