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. 获取要合并的列列表作为
2. 的数组。
   • 如果您要合并两个已合并的列（或其中一个列已合并），请提取组中的每一列。在您的结构中，您希望“第 1 列”有自己的
   • ，而没有子
     。
   • 您可能想要克隆这些，因为您将删除 (6) 中的原始节点。
3. 创建一个新的
   节点，添加正确的“合并”类名。
4. 添加您在 (1) 中收集的所有
5. ，除了第一个之外，并将它们作为子项插入
   。
6. 插入
   作为您在 (1) 中收集的第一个
   • 的最后一个子项。
   • 插入
   • （(4) 中的父级）作为列列表 ($('#columns')) 的子级。
   • 删除要合并的原始列。

Answer 2

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