ページに表示された情報を並べ替える

Question

私は1週間このことを頭に入れていました。私は他の開発の頭脳が必要です。私はコードを探しているわけではなく、方向性を持ったフィードバックを探しています。

私たちには、10個程度のグループがあり、各グループには10個程度のフィールドがあります。私たちの要件は、ユーザーがグループをソートし、各グループ内のフィールドを並べ替えるだけでなく、グループやフィールドを非表示にし、このモバイル対応にしておくことです。私はこれを考えすぎるかもしれないが、この要件は保守の悪夢のように思える。

今日、これはASP.NET/C＃のデモですが、近いうちにJavaに移行する予定です。バックエンドの技術にかかわらず、これがHTML5/CSS3側でどのように機能するかを把握しようとしています。私は25年間開発してきましたが、これは私の心を揺さぶっています。どんな方向にも大変感謝しています。

Answer 1

私が思い付くことができます最も簡単なのはflexboxとそのorder財産

.container, 
 
.groups { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px dotted gray; 
 
} 
 
.groups:nth-child(2) { 
 
    order: -1;    /* default is 0 */ 
 
    background: lightgray; 
 
} 
 
.groups:nth-child(2) .fields:nth-child(3) { 
 
    order: 1;    /* default is 0 */ 
 
    background: lightblue; 
 
} 
 
.groups:nth-child(1) .fields:nth-child(2) { 
 
    order: -1;    /* default is 0 */ 
 
    background: lightgreen; 
 
} 
 
.groups:nth-child(3) .fields:nth-child(2), 
 
.groups:nth-child(3) .fields:nth-child(3) { 
 
    display: none; 
 
}

<div class="container"> 
 
    <div class="groups"> 
 
    <div class="fields">A 1</div> 
 
    <div class="fields">A 2</div> 
 
    <div class="fields">A 3</div> 
 
    <div class="fields">A 4</div> 
 
    </div> 
 
    <div class="groups"> 
 
    <div class="fields">B 1</div> 
 
    <div class="fields">B 2</div> 
 
    <div class="fields">B 3</div> 
 
    <div class="fields">B 4</div> 
 
    </div> 
 
    <div class="groups"> 
 
    <div class="fields">C 1</div> 
 
    <div class="fields">C 2</div> 
 
    <div class="fields">C 3</div> 
 
    <div class="fields">C 4</div> 
 
    </div> 
 
</div>