[英]Data-driven breadcrumb based on hierarchical (parent-child) data
我想為我的網站創建一個完全由數據驅動的面包屑 。
數據使用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>
或者,選擇
1 / 101 / 1002
2 / 104
我為我的問題找到了解決方案。
首先,根據本文提到的建議,我更改了表結構。 結果,我將數據結構更改為:
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;
})
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.