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> の配列としてマージする列のリストを取得します。
    • 既にマージされている 2 つの列をマージする場合 (または列の 1 つが既にマージされている場合)、グループ内の各列を抽出します。あなたの構造では、「列 1」に子 <ul> なしで独自の <li> を持たせたいと思うでしょう。
    • (6) で元のノードを削除するので、これらのクローンを作成することをお勧めします。
  2. 適切な「マージされた」クラス名を追加して、新しい <ul> ノードを作成します。
  3. (1)で集めた <li> を最初のものを除いてすべて追加し、それらを子として <ul> に挿入します。
  4. (1) で集めた最初の <li> の最後の子として <ul> を挿入します。
  5. <li> ((4)の親) を列リスト ($('#columns')) の子として挿入します。
  6. マージしようとしていた元の列を削除します。
于 2008-11-24T01:15:44.847 に答える
0

表形式のデータにはテーブルを使用することに固執すると思いますが、順序付けられていないリストはコンテンツにあまり適していないようです。

于 2008-11-23T20:36:38.980 に答える