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>

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

1 个答案: