通过jquery可折叠动态BOM？

Question

我有一个 php 页面，它从代表产品 BOM（物料清单）的 sql2000 存储过程中提取数据。现在它显示为一张平板，效果很好。但是，经过 3 天的谷歌搜索/黑客攻击后，我终生无法弄清楚如何将这些数据转换为缩进的可折叠/可展开表或 UL。

表格如下：

• ID[
• BOM_Level
• Parent_Item
• Component_Item
• 组件数量

BOM_Level 就是 BOM 的级别（0-12 之间的数字）。我假设是因为提供了它会很简单，因为 bom_level 确实代表了每个部分的缩进级别，但是唉，它并不简单......

大体结构如下，但零件数量和级别会因产品而异：

0 Top Level
 1 - Assembly 1
  2 - part 1 of Assembly 1
  2 - part 2 of Assembly 1
  2 - part 3 of Assembly 1
  2 - part 4 of Assembly 1
 1 - Assembly 2
  2 - Assembly 1 of Assembly 2
   3 - part 1 of Assembly 1 of Assembly 2
   3 - part 2 of Assembly 1 of Assembly 2
   3 - part 3 of Assembly 1 of Assembly 2

我一直在尝试做类似的事情：

• 如果 bom_level == previous_bom_level 则创建 li
• 如果 bom_level > previous_bom_level 添加新的 UL 并开始新的 li
• 如果BOM级别是

说了这么多，我只是想不通如何做到这一点。有什么想法吗？

Answer 1

假设你有这样的数据：

// plus any additional data per entry
$data = array (
  array (
    'id' => '10',
    'bom_level' => '2',
    'parent_item_no' => '2800CF',
    'comp_item_no' => '2800CF-02',
  ),
  array (
    'id' => '66',
    'bom_level' => '3',
    'parent_item_no' => '2800CF-02',
    'comp_item_no' => '2000CF-12',
  ),
  array (
    'id' => '189',
    'bom_level' => '4',
    'parent_item_no' => '2000CF-12',
    'comp_item_no' => '0578',
  ),
  array (
    'id' => '190',
    'bom_level' => '4',
    'parent_item_no' => '2000CF-12',
    'comp_item_no' => '2000CF-SH11',
  ),
  array (
    'id' => '222',
    'bom_level' => '5',
    'parent_item_no' => '2000CF-SH11',
    'comp_item_no' => '1000',
  ),
  array (
    'id' => '191',
    'bom_level' => '4',
    'parent_item_no' => '2000CF-12',
    'comp_item_no' => '2000CF-SH12',
  ),
  array (
    'id' => '223',
    'bom_level' => '5',
    'parent_item_no' => '2000CF-SH12',
    'comp_item_no' => '1000',
  ),
  array (
    'id' => '67',
    'bom_level' => '3',
    'parent_item_no' => '2800CF-02',
    'comp_item_no' => '2000CF-AG01',
  ),
  array (
    'id' => '192',
    'bom_level' => '4',
    'parent_item_no' => '2000CF-AG01',
    'comp_item_no' => '303025-20',
  ),
  array (
    'id' => '68',
    'bom_level' => '3',
    'parent_item_no' => '2800CF-02',
    'comp_item_no' => '2000CF-PL13',
  ),
  array (
    'id' => '193',
    'bom_level' => '4',
    'parent_item_no' => '2000CF-PL13',
    'comp_item_no' => '0500',
  ),
  array (
    'id' => '69',
    'bom_level' => '3',
    'parent_item_no' => '2800CF-02',
    'comp_item_no' => '2000CF-PL14',
  ),
  array (
    'id' => '194',
    'bom_level' => '4',
    'parent_item_no' => '2000CF-PL14',
    'comp_item_no' => '0187',
  ),
  array (
    'id' => '70',
    'bom_level' => '3',
    'parent_item_no' => '2800CF-02',
    'comp_item_no' => '2000CF-SQ01',
  ),
  array (
    'id' => '195',
    'bom_level' => '4',
    'parent_item_no' => '2000CF-SQ01',
    'comp_item_no' => '050018-20',
  ),
  array (
    'id' => '71',
    'bom_level' => '3',
    'parent_item_no' => '2800CF-02',
    'comp_item_no' => '2000CF-WB06',
  ),
  array (
    'id' => '196',
    'bom_level' => '4',
    'parent_item_no' => '2000CF-WB06',
    'comp_item_no' => '040013-20',
  ),
);

comp_item_no 是唯一的，parent_item_no 指向它的父级。以parent_item_no=0 为根节点。

您可以将其映射到另一个结构：

$map = array();
foreach ($data as $entry) {
  if (!isset($map[$entry['parent_item_no']])) {
    $map[$entry['parent_item_no']] = array();
  }

  $map[$entry['parent_item_no']][] = $entry;
}

又可以递归遍历，如下所示：

function helper($children, $map) {
  if (sizeof($children) > 0) {
    echo '<ul>';
    foreach ($children as $parentId => $child) {
      echo '<li>';
      echo $child['comp_item_no'];
      if ($child['comp_item_no'] !== $child['parent_item_no'] && isset($map[$child['comp_item_no']])) {
        helper($map[$child['comp_item_no']], $map);
      }
      echo '</li>';
    }
    echo '</ul>';
  }
}

/**
 * note that '2800CF' here is manually choosen
 * because it has the lowest bom_level! In your real
 * code you might want to capture those nodes while
 * restructuring the array (see above)
 */
helper($map['2800CF'], $map); 

产生一个嵌套的ul。示例（对于上面的数据）：

• 2800CF-02
  • 2000CF-12
    • 0578
    • 2000CF-SH11
      • 1000
    • 2000CF-SH12
      • 1000
  • 2000CF-AG01
    • 303025-20
  • 2000CF-PL13
    • 0500
  • 2000CF-PL14
    • 0187
  • 2000CF-SQ01
    • 050018-20
  • 2000CF-WB06
    • 040013-20

演示：http://codepad.org/FJwX3Z1c