1

フロントエンドにいくつかの列を持つテーブルを作成しました。データを含むテーブルは次のようになります。

    ID         Name          Date1           Date2         Code1    
   00001        abc         2012/1/1         2012/1/10       1
   00002        def         2012/1/12        2012/2/1        1
   00002        def         2012/1/12        2012/2/1        2
   00002        def         2012/1/12        2012/2/1        3
   00003        xyz         2012/2/12        2012/3/1        2
   00003        xyz         2012/2/12        2012/3/1        4

ここで、上記の表にデータをグループ化して表示したいと考えています。つまり、すべての一意の ID には 1 行しかなく、すべてのコード列がマージされて 1 行として表示されます。

    ID         Name          Date1           Date2         Code1    
   00001        abc         2012/1/1         2012/1/10       1
                                                             1
   00002        def         2012/1/12        2012/2/1        2                              
                                                             3
   00003        xyz         2012/2/12        2012/3/1        2
                                                             4

私の書式設定スタイルは無視してください。コード値の数に関する情報がない場合、これをプログラムで行うことは可能ですか? 前もって感謝します。

4

3 に答える 3

0

はい、それは確かに可能です。

テーブルの制約に応じて（たとえば、IDは厳密に増加していますか？）、要求したとおりに実行するいくつかのアルゴリズムを考えることができます。

しかし、私はそれに対して強くお勧めします。DOMで直接jQueryを使用してこれを行うには、多くのDOMアクセス操作が必要になり、比較的時間がかかります。これは、データが生成されると思われるサーバー側で行うか、同じデータの配列/オブジェクト表現でクライアント側で行う方がはるかに優れています。

于 2012-10-10T22:57:29.160 に答える
0

この関数は、上のセルの内容を複製するセルの内容を削除します。それらはマージされませんが（アラrowspan/ colspan）、空になります。

function emptyDittoCells(table) {
    if (!(table instanceof jQuery && table.is("table")))
        throw "bad parameter";

    table.find('tr').each(function(rowElement) {
        var row = $(rowElement);
        var previousRow = $(rowElement).prev('tr');
        if (!previousRow.length) return;

        row.each(function(cellElement, index) {
            var cell = $(cellElement);
            var previousCell = previousRow.children("td:nth-child(" + index + ")"); 

            while (previousCell.data('ditto')) {
                previousCell = previousCell.data('ditto');
            }

            if (hasSameContents(cell, previousCell)) {
                cell.empty()
                    .data('ditto', previousCell);
            }
        });
    });
}

function hasSameContents(a, b) {
    return (a.text() == b.text()); // naive but usable in the simple case
}

テストされておらず、DOM を少し集中的に使用しますが、うまくいくと思います。考えられる構文エラー (右括弧の欠落) 以外に、私はそのtd:nth-child()セレクターについて最も心配しています。それは としてより堅牢に書くことができます$(previousRow.children('td').get(index))。

于 2012-10-10T23:02:26.333 に答える
0

前に述べたように、この種の変換はサーバー側で行う方が適切です。

ただし、テーブルが大きすぎず、指定された ID に対して Name、Date1、Date2 の値が同じであると仮定すると、(jQuery などを使用して) テーブルを解析し、最初から再構築できます。

擬似コード:

foreach (row)
{
  foreach (column)
  {
    get ID value;
    if (not yet stored) store data for that ID somewhere else;
    store Code1 value with its ID;
  }
}

foreach (ID stored)
{
  get all related values;
  rebuild table row;
}

お役に立てば幸いです。そうでない場合は、jQuery コードを記述することはそれほど難しくありません。

于 2012-10-10T23:13:29.867 に答える