php - 通过 jquery 可折叠的动态 BOM？

Question

我有一个 php 页面从代表产品 BOM( Material list )的 sql2000 存储过程中提取数据。现在它显示为一张平板，效果很好。然而，经过 3 天的谷歌搜索/黑客攻击后，我终究无法弄清楚如何将该数据转换为缩进的可折叠/可展开表格或 UL。

表格如下:

• ID[<--唯一]
• BOM_Level
• 父元素
• 组件_元素
• 组件数量

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层级为<上一个bom层级，则结束上一个UL，开始另一套li。

话虽如此，我还是不太清楚如何做到这一点。有什么想法吗？

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