javascript — управляемые данными хлебные крошки, основанные на иерархических (родительско-дочерних) данных
Я хотел бы создать хлебный мякиш для моего сайта, который полностью ориентирован на данные.
Данные хранятся с использованием 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 - …
Решение
Я нашел решение для моего вопроса.
Во-первых, я изменил структуру таблицы, основываясь на предложениях, упомянутых в Эта статья. В результате я изменил свою структуру данных на:
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;
})
});
Другие решения
Других решений пока нет …
detector