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

Question

要求

1. 显示包含类别，组和项目的表格。
2. 项目必须可在组内排序（但不能移至其他组）。



当前代码

我目前正在使用一个大型的＆＃39; ul＆＃39;与＆＃39; li＆＃39;对于行和＆＃39; h3-h5＆＃39;对于列。然后我像桌子一样设计它。我这样做是因为我认为它会比使用合适的表更灵活。浏览器兼容性也不是主要问题。请参阅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会自动被视为表格单元格，而不是让它的子节点成为表格行。这将是我理想的方法，因为我希望对类别进行重新排序，同时维护他们的孩子和小组，同时保持他们的孩子。原始fiddle的适用分叉。注意＆＃34; ul.group-list＆＃34;在下面的示例中：

<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

我认为我们不能将嵌套列表作为平面表。相反，继续使用嵌套列表，在CSS中定义每个列宽，是的，它不会像我们想要的那样流畅。

使用嵌套列表，我们可以应用带包含的jQuery Draggable来满足您的第二个要求。

Answer 2

由于这基本上是表格数据，因此正确的解决方案是使用多个<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>

Answer 3

回答我自己的问题

...另一个可能的解决方案我觉得我的用例比目前给出的更好。我确信仍有更好的解决方案。它不漂亮，但它的工作原理。

我将拖动句柄添加到父句ul，将鼠标悬停在句柄上，并仅包含属于该父项的项目。我对性能有点担心，但到目前为止似乎有效。

大致是：

dragging = false;
$list = $('ul.full-table');
$list.on('mouseover', '.drag-handle', function()
{
  // Use classes and custom html attributes to determine the parent.
  // My code is about 20 lines or so for this. 
  // 1. Identify level based on class.
  // 2. Identify parent id.
  $parent = $('this').my_parent();

  // 3. Find siblings that have same parent.
  $siblings.find('has parent id');

  if (!dragging && (id != parent_id))
  {
    $list.sortable(
    {
      handle: '.drag-handle',
      axis: 'y',
      items: selector,
      tolerance: 'pointer',
      start: dragStart,
      helper: dragHelper,
      sort: dragSort,
      stop: dragStop,
      update: dragUpdate
    });
  }
});

• 在dragStart和dragStop上，我更新dragging标志。
• 在dragStop上，我将孩子们移到被拖到的位置。
• 在dragHelper中，我确保占位符始终位于任何子元素之下（例如，在类别和组中）。我还将任何子项附加到拖动辅助元素（显示被拖动内容的元素）使用从https://stackoverflow.com/a/5679450/819883借来的代码。
• 在dragUpdate我执行标准ajax以更新数据库中的顺序。