前書き
私は Vue を使用しているので、MVVM はデータ駆動型である必要があると考えています。そのため、データをレンダリングしてから DOM 操作を行うのではなく、モデル内でトリックを実行することを検討しています。もちろん、基本的な CSS は依然として必要です。したがって、この方法は、Angular や React などのすべてのデータ駆動型フレームワークに有効です。
実装アイデア
元の通常のテーブルのコードは次のようになります:
<tr v-for="item in items"> <td width="3%">{{ $index + 1 }}</td> <td width="15%">{{item.bsO_Name}}</td> <td width="8%" :class="{'overtime': overtime(item.GathDt)}">{{item.GathDt | time}}</td> <td width="5%">{{item.F1}}</td> <td width="5%">{{item.F2}}</td> <td width="5%">{{item.F4}}</td> <td width="5%">{{item.F3}}</td> <td width="5%">{{item.F5}}</td> <td width="5%">{{item.F6}}</td> <td width="5%">{{item.F7}}</td> <td width="5%">{{item.F8}}</td> <td width="5%">{{item.F9}}</td> <td width="5%">{{item.F10}}</td> </tr>
まず、ネイティブの
次の行がまだレンダリングされている場合は、押し出されてしまうため、以下の結合されたセルを非表示にする必要があります。これは、display: none; css で制御できます。
したがって、各
コードは次のようになります
<tr v-for="item in items"> <td width="3%">{{ $index + 1 }}</td> <td width="10%" :rowspan="item.bsO_Namespan" :class="{hidden: item.bsO_Namedis}">{{item.bsO_Name}}</td> <td width="8%" :rowspan="item.GathDtspan" :class="{hidden: item.GathDtdis}" :class="{overtime: overtime(item.GathDt)}">{{item.GathDt | time}}</td> <td width="5%" :rowspan="item.F1span" :class="{hidden: item.F1dis}">{{item.F1}}</td> <td width="5%" :rowspan="item.F2span" :class="{hidden: item.F2dis}">{{item.F2}}</td> <td width="5%" :rowspan="item.F3span" :class="{hidden: item.F3dis}">{{item.F3}}</td> <td width="5%" :rowspan="item.F4span" :class="{hidden: item.F4dis}">{{item.F4}}</td> <td width="5%" :rowspan="item.F5span" :class="{hidden: item.F5dis}">{{item.F5}}</td> <td width="10%" :rowspan="item.F6span" :class="{hidden: item.F6dis}">{{item.F6}}</td> <td width="8%" :rowspan="item.F7span" :class="{hidden: item.F7dis}" :class="{overtime: overtime(item.F7)}">{{item.F7 | time}}</td> <td width="5%" :rowspan="item.F8span" :class="{hidden: item.F8dis}">{{item.F8}}</td> <td width="5%" :rowspan="item.F9span" :class="{hidden: item.F9dis}">{{item.F9}}</td> <td width="5%" :rowspan="item.F10span" :class="{hidden: item.F10dis}">{{item.F10}}</td> <td width="5%" :rowspan="item.F11span" :class="{hidden: item.F11dis}">{{item.F11}}</td> </tr>
その中で、これらの2つの属性にはいくつかの特徴があります:
表示されるセルの行幅は>1の値であり、次の行数が記録されます
表示されるセルの表示は true です
表示されていない次のセルの行幅は 1 で、表示は false です
データが 1 行だけあるセルの行幅は 1 で、表示はtrue
実際には、入力テーブル配列に対して、各データ項目に2つの属性、rowspanとdisplayを追加し、rowspan値が
以下の同じ値である行の数を計算するためのアルゴリズムを設計することです。この列に、rowspan 値に基づいて表示値が表示されるかどうかを計算し、最後に変更された配列が出力されます。
サンプルコードを解く
function combineCell(list) { for (field in list[0]) { var k = 0; while (k < list.length) { list[k][field + 'span'] = 1; list[k][field + 'dis'] = false; for (var i = k + 1; i <= list.length - 1; i++) { if (list[k][field] == list[i][field] && list[k][field] != '') { list[k][field + 'span']++; list[k][field + 'dis'] = false; list[i][field + 'span'] = 1; list[i][field + 'dis'] = true; } else { break; } } k = i; } } return list; }
概要
このコードは、主に、ポインター k を定義し、最初の値を指し始める kmp の考えに基づいています。を下方向に比較し、rowspan と表示設定については、
異なる値があった場合は飛び出しと判断し、ポインタ k に行数を加えて通知します。プロセスで計算されると、ジャンプが実行され、次に次のセルの値が比較されます。これは、同じ文字列を決定する kmp のポインター ジャンプと同じ原理です。
combineCell() 関数を使用して、ネットワーク リクエストから返されたデータをフィルターし、対応する値を追加して、その値を vue によって監視される配列に割り当てます。
実際、このメソッドは vue だけでなく、Angular や React などのデータ駆動型フレームワークにも適用できます。テーブルのマージを実現したい場合は、リクエストによって返された値をフィルターするだけです。