html - 对页面上显示的信息进行排序

Question

我已经为此绞尽脑汁一个星期了，我需要一些其他开发方面的帮助。我不是在寻找代码，只是在寻找一些方向性的反馈。

我们的页面有 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>