gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 05:11:28 27 4
gpt4 key购买 nike

我正在为我的兄弟编写一个基于 Web 的小实用程序,他需要合并 CSV 文件中的列。我知道这样的事情肯定存在于某个地方,但这很大程度上是因为这是一个有趣的小练习。

无论如何,我正在尝试找出最好/最简洁的方式来呈现 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 按照我想要的方式响应的细节给我带来了问题。我现在就给你答案,我想我又回到了盐矿。

最佳答案

基本步骤:

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

关于jquery - UI 可用性 - 重新排序和合并列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/312900/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com