在 HTML table 布局中重新定位列及其内容
Relocating a column and its Contents in HTML table layout
我正在为报告 UI、
使用 table
就会这样
现在,我正在改变它,我可以重新排列 table 的列,这样我就可以轻松地制作新的重新排列的报告。
喜欢:
我已经用Jquery draggable 和 sortable 完成了 table header。但是不知道如何用 header.
重新定位相应的列
请帮忙。
您需要从 <thead>
中获取该列的索引并将移动应用到 tbody
中的所有列。
有许多可用的插件 - 请参阅 google https://www.google.co.uk/search?q=jquery+ui+draggable+column 以获得类似
的结果
- http://akottr.github.io/dragtable/ (IE7+) see also http://www.jqueryscript.net/demo/Simple-jQuery-Plugin-For-Draggable-Table-Columns-Dragtable/
- 较旧的 SO 问题 Drag and drop sorting of table columns with jQuery
- 以上 SO 问题的答案列出了 akkotr 的 dragtable.js 和 http://jebaird.com/demos/dragtable/ as example (forked from akottr's dragtable)。
akottr 使用一种方法将 css class 附加到您要拖动的列,获取该列的索引,找到该索引的元素(thtb.find('> tr > td:nth-child(' + i + ')')
,然后将原始索引与要将列移动到的位置进行比较(参见函数_bubbleCols
)
然后使用一个名为 swapNodes
的函数将所选列与新位置的列交换。
有一些巧妙的事情,例如异步重新安排 table、处理内部 tables、firefox 修复、对(不)支持的 msie 行为的评论等
我正在为报告 UI、
使用 table就会这样
现在,我正在改变它,我可以重新排列 table 的列,这样我就可以轻松地制作新的重新排列的报告。
喜欢:
我已经用Jquery draggable 和 sortable 完成了 table header。但是不知道如何用 header.
重新定位相应的列请帮忙。
您需要从 <thead>
中获取该列的索引并将移动应用到 tbody
中的所有列。
有许多可用的插件 - 请参阅 google https://www.google.co.uk/search?q=jquery+ui+draggable+column 以获得类似
的结果- http://akottr.github.io/dragtable/ (IE7+) see also http://www.jqueryscript.net/demo/Simple-jQuery-Plugin-For-Draggable-Table-Columns-Dragtable/
- 较旧的 SO 问题 Drag and drop sorting of table columns with jQuery
- 以上 SO 问题的答案列出了 akkotr 的 dragtable.js 和 http://jebaird.com/demos/dragtable/ as example (forked from akottr's dragtable)。
akottr 使用一种方法将 css class 附加到您要拖动的列,获取该列的索引,找到该索引的元素(thtb.find('> tr > td:nth-child(' + i + ')')
,然后将原始索引与要将列移动到的位置进行比较(参见函数_bubbleCols
)
然后使用一个名为 swapNodes
的函数将所选列与新位置的列交换。
有一些巧妙的事情,例如异步重新安排 table、处理内部 tables、firefox 修复、对(不)支持的 msie 行为的评论等