javascript - 基于分层(父子)数据的数据驱动面包屑

Question

我想为我的网站创建一个完全由数据驱动的面包屑。

数据使用 MariaDB 存储，如下所示:

parent_id | parent_name | child_id | child_name
———————————————————————————————————————————————
    1     |     AAA     |    101   |    aaa
    1     |     Aaa     |    102   |    bbb
    1     |     Aaa     |    103   |    ccc
   101    |     aaa     |   1001   |   aaaa
   101    |     aaa     |   1002   |   bbbb
   102    |     bbb     |   1004   |   cccc
   102    |     bbb     |   1005   |   dddd    
    2     |     Bbb     |    104   |    ddd 

如果我选择 id='1005' 的记录，我希望我的面包屑导航看起来像 1/102/1005
等效的 HTML 是:

<div id="breadcrumb">
    <ul class="breadcrumb">
        <li><a href="#">1</a></li>
        <li><a href="#">102</a></li>
        <li>1005</li>
    </ul>
</div>

或者，选择

• “1002”将面包屑导航更新为1/101/1002
• “104”将面包屑导航更新为2/104
• ...

Answer 1

我找到了问题的解决方案。

首先，我根据this article中提到的建议更改了表结构。 。结果，我将数据结构更改为:

    id  |     name    |   lft    |   rgt
—————————————————————————————————————————————
     1  |     AAA     |     1    |    16
   101  |     aaa     |     2    |     7
  1001  |     aaaa    |     3    |     4
  1002  |     bbbb    |     5    |     6
   102  |     bbb     |     8    |    13
  1004  |     cccc    |     9    |    10
  1005  |     dddd    |    11    |    12
   103  |     ccc     |    14    |    15
     2  |     BBB     |    17    |    20
   104  |     ddd     |    18    |    19

然后使用 php，我可以使用以下 SQL 语句轻松地以几乎正确的格式从表中提取数据(其中“$id”是一个变量，取决于前面提到的用户选择):

SELECT parent.id, parent.name
FROM
  table AS node,
  table AS parent
WHERE
  node.lft BETWEEN parent.lft AND parent.rgt
AND
  node.id = '$id'
ORDER BY
  parent.lft;

最后，使用 d3.js，我可以使用以下代码创建 HTML:

d3.json('php/breadcrumb.php?id=' + id).get(function(error, d_breadcrumb) {

  var ul = d3.select('#breadcrumb').append('ul')
    .attr('class', 'breadcrumb');

  ul.selectAll('li')
    .data(d_breadcrumb)
    .enter()
    .append('li')
      .append('a')
        .attr('href', function(d) {
          return '?id=' + d.id;
        })
        .text(function(d) {
          return d.name;
        })
});