jquery - 如何将嵌套列表显示为平面表格？

Question

要求

1. 显示包含类别、组和元素的表格。
2. 元素必须在组内可排序(但不能移动到其他组)。

当前代码

我目前正在使用一个大的“ul”，“li”代表行，“h3-h5”代表列。然后我把它设计成一张 table 。我这样做是因为我认为这比使用合适的表格更灵活。浏览器兼容性也不是主要问题。在 jsfiddle 中查看我当前的代码.下面是一个小的 html 片段。

HTML:

<div class="markup-value">
  <ul class="category-list ui-sortable">
    <li class="category" note_measure_id="62527" measure_category_id="16">
      <h3 class="line-heading"></h3>
        <li class="group" note_measure_id="62528" measure_group_id="288">
          <h4 class="handle"></h4>

jQuery:

  $('ul.category-list').sortable({
    handle: '.drag-handle',
    axis: 'y',
    items: 'li.measure',
    //update: patientPhoneReorderHandler,
    helper: fixDragWidth
  });

问题

基础元素可以在组之间拖动。我试图通过将层次结构包装在 ul 标签中来防止这种情况发生。但是表格格式将不再有效，因为 ul 自动被视为表格单元格，而不是让它的子 li 成为表格行。这将是我的理想方法，因为我希望对类别进行重新排序，以在保留其子项的同时维护其子级和类别内的组。原始fiddle的适用 fork .请注意下面示例中的“ul.group-list”:

<div class="markup-value">
  <ul class="category-list ui-sortable">
    <li class="category" note_measure_id="62527" measure_category_id="16">
      <h3 class="line-heading"></h3>
      <ul class="group-list">
        <li class="group" note_measure_id="62528" measure_group_id="288">
          <h4 class="handle"></h4>

解决方案:

1. 如果他们的方法允许此层次结构与额外的 ul 标签一起工作并且仍然看起来像一个平面表，这将是我的理想解决方案。
2. 让 html 处于平面方向并以某种方式限制可拖动区域也是可以接受的。该列表可能非常大，因此我想避免遍历每个元素或组。

Answer 1

由于这本质上是表格数据，正确的解决方案是使用多个 <tbody>将行分组在一起的标签:

body {
  font-family:sans-serif;
}
table {
  text-align:left;
  border-collapse:collapse;
  width:100%;
}
td, th {
  border:1px solid grey;
  padding:0.3em;
}
tr.cat th {
  background:#A3DABE
}
tr.grp th {
  background:#B9D9E3;
  padding-left:1em;
}
thead th {
  font-weight:normal;
}
tbody td {
  padding-left:2em;
}

<table>
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Normal Values</th>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tr class="cat">
    <th></th>
    <th>First Category</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr class="grp">
    <th></th>
    <th>Group A</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tbody>
    <tr>
      <td></td>
      <td>Alpha</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Bravo</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Charlie</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Delta</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tr class="grp">
    <th></th>
    <th>Group B</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tbody>
    <tr>
      <td></td>
      <td>Echo</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Foxtrot</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Golf</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Hotel</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tr class="cat">
    <th></th>
    <th>Second Category</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr class="grp">
    <th></th>
    <th>Group C</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tbody>
    <tr>
      <td></td>
      <td>India</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Julliet</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Kilo</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Lima</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>