我想为我的网站创建一个完全由数据驱动的面包屑。
数据使用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…
最佳答案
我为我的问题找到了解决方案。
首先，根据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;
})
});