75 lines
1.4 KiB
HTML
75 lines
1.4 KiB
HTML
<!DOCTYPE HTML>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<link href="tree.css" rel="stylesheet">
|
||
|
||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
|
||
<script src="regions.js"></script>
|
||
<script src="tree.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<script id="tree-template" type="text/template">
|
||
<ul>
|
||
<% $(children).each(function() {
|
||
var nodeData = data[this];
|
||
var hasChildren = nodeData.children && nodeData.children.length;
|
||
%>
|
||
<li data-id="<%=nodeData.id%>" class="<%=hasChildren ? 'tree-closed' : ''%>">
|
||
<% if (hasChildren) { %> <span class="tree-toggler"></span> <% } %>
|
||
<input type="checkbox" value="<%=nodeData.id%>">
|
||
<%=nodeData.title%>
|
||
</li>
|
||
<% }); %>
|
||
</ul>
|
||
</script>
|
||
|
||
<script>
|
||
// требование - как можно меньше DOM-элементов
|
||
// работа с данными из 1000 узлов
|
||
/* пример структуры данных
|
||
var data = [
|
||
{
|
||
children: [1,2,3]
|
||
},
|
||
{
|
||
title: 'Россия',
|
||
id: 1,
|
||
children: [4,5]
|
||
},
|
||
{
|
||
title: 'Украина',
|
||
id: 2
|
||
},
|
||
{
|
||
title: 'Беларусь',
|
||
id: 3
|
||
},
|
||
{
|
||
title: 'Север',
|
||
id: 4
|
||
},
|
||
{
|
||
title: 'Юг',
|
||
id: 5
|
||
}
|
||
|
||
];
|
||
*/
|
||
|
||
var tree = new Tree({
|
||
template: _.template($('#tree-template').html().trim()),
|
||
data: regions
|
||
});
|
||
|
||
tree.getElement().appendTo('body');
|
||
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|
||
|