UI可用性 - 重新排序和合并列

Question

我正在为需要合并CSV文件中的列的兄弟编写一个基于Web的小工具。我知道这样的事情肯定存在于某个地方，但其中很大一部分是一个有趣的小练习。

无论如何，我正在试图找出最佳/最好的方式来呈现UI的一部分，在那里他重新排列列并选择合并哪些列。

jQuery UI“可选”交互提供了我所需要的大约85％ - 列的简单重新排序 - 但是我在合并时遇到了一些困难。我正在尝试做的是使“合并”列成为单个项目下的嵌套列表。

例如：

<ul id="columns">
<li>Column 1</li>
<li>Column 2</li>
</ul>

会变成：

<ul id="columns">
<li>Column 1<ul class="merge"><li>Column 2</li></ul></li>
</ul>

事实证明这比我预期的要痛苦得多，所以我想知道是否有人有更好的方法来呈现整体UI。我对jQuery很满意，所以如果可以在jQuery中完成奖励积分：D

@dylanfm：此不是表格数据 - 它只是列名称的列表，但没有实际数据。此外，我使用的特定HTML元素并不是我所要求的核心。

@smo：我喜欢你的想法的简单性，但问题是有几个打开不同的列，所以不幸的是，每列列出每列一次是不可能的。

@strager：这正是我一直想做的事情，只是让UI以我想要的方式回应的细节给了我一些问题。我现在就给你答案，我想这对我来说是盐矿。

Answer 1

基本步骤：

1. 将要合并的列列表作为＆lt; li＆gt;的数组。
   • 如果要合并两个已合并的列（或其中一个列已合并），请提取组中的每个列。在你的结构中，你想让“第1列”拥有自己的＆lt; li＆gt;没有孩子＆lt; ul＆gt;。
   • 您可能想要克隆这些，因为您将删除（6）中的原始节点。
2. 创建一个新的＆lt; ul＆gt;节点，添加适当的“合并”className。
3. 添加您在（1）中收集的所有＆lt; li＆gt;（第一个除外），并将它们作为子项插入＆lt; ul＆gt ;.
4. 插入＆lt; ul＆gt;作为第一个＆lt; li＆gt;的最后一个孩子你聚集在（1）。
5. 插入＆lt; li＆gt; （（4）中的父）作为列列表的子项（$（'＃columns'））。
6. 删除要合并的原始列。

Answer 2

我要坚持使用表格来表格数据，无序列表似乎不太适合内容。