2

我正在为需要在 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 以我想要的方式响应的细节给我带来了问题。我现在就给你答案,我想这对我来说又回到了盐矿。

4

2 回答 2

1

基本步骤:

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

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

于 2008-11-23T20:36:38.980 回答