- PVSM.RU - https://www.pvsm.ru -
В процессе работы над небольшим web-проектом мне потребовался компонент для отображения дерева элементов на странице. Компонент должен позволять развернуть/свернуть узлы дерева, обработать клик по элементу, добавить к дереву новые узлы, в общем предоставлять самые основные функции «treeview».
Условия использования компонента при этом несколько отличаются от «общепринятых» в лучшую сторону — в качестве среды исполнения будут применяться современные (IE9+) браузеры (web-проект предполагается использовать в рамках полностью контролируемой внутренней сети). Еще одним моментом является платформа, на базе которой разрабатывается серверная часть. Это ASP.NET MVC, а значит желательно, чтобы компонент поставлялся в том числе в виде NuGet-пакета, дружественного к типовой структуре каталогов ASP.NET MVC-приложения.
В процессе работы над вопросом я изучил существующие варианты и, как водится, изобрел очередной велосипед, но при этом свой собственный, с блэкджеком и шлюзами.
На момент написания этой статьи, в сети Интернет можно найти шесть наиболее популярных компонентов для отображения дерева элементов.
Некоторые выводы.
Взвесив все «за» и «против», я решил изобрести собственный велосипед со следующими характеристиками: максимально простой, дружественный к стандартному шаблону приложения на базе ASP.NET MVC и Visual Studio 2012, без груза поддержки устаревших браузеров. Велосипед был изобретен. Его отличительными особенностями стали:
Для изолирования CSS правил используется простой, но, на мой взгляд, наиболее правильный подход.
Таким образом, CSS правила можно построить на основе селекторов тегов, не создавая для каждого элемента специальный класс. Использование LESS делает исходный код таких CSS правил довольно наглядным.
LESS | CSS |
---|---|
|
|
Основной TypeScript-класс Tree
имеет три открытых члена.
updateNode(...)
добавляет элементы в указанный узел.onBranchExpand
и onNodeClick
используются для указания обработчиков соответствующих событий.Два закрытых метода renderNodeItemsTo(...)
и toggleNodeItemsVisible(...)
реализуют основную логику. Изменение видимости элементов дерева реализуется посредством добавления/удаления DOM-элементов (для удаления используется Element.removeChild(...)
— jsperf [14]).
Метод toggleNodeItemsVisible(...)
возвращает false
, если указанный узел дерева (JS-объект) не имеет элементов. Благодаря этому условие вызова обработчика onBranchExpand
выглядит довольно лаконично:
if(!this.toggleNodeItemsVisible(node) && (this.onBranchExpand instanceof Function)) {
this.onBranchExpand(nodeId);
}
Использование TypeScript+LESS при реализации компонента помимо прочего существенно упрощает его применение в своих проектах и доработку под свои нужды.
GitHub — github.com/resnyanskiy/js.tree [15]
NuGet — nuget.org/packages/resnyanskiy.js.tree [16]
Автор: resnyanskiy
Источник [17]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/36620
Ссылки в тексте:
[1] jsTree: http://www.jstree.com/demo
[2] прошлогоднему обсуждению jsTree: http://habrahabr.ru/post/151239/
[3] jqTree: http://mbraak.github.io/jqTree/
[4] jQuery TreeView plugin: http://jquery.bassistance.de/treeview/demo/
[5] Dynatree: http://wwwendt.de/tech/dynatree/doc/samples.html
[6] dhtmlxTree: http://dhtmlx.com/docs/products/dhtmlxTree/samples/index.html
[7] dTree: http://www.destroydrop.com/javascripts/tree/default.html
[8] Google Code: https://code.google.com/p/dynatree/
[9] GitHub: https://github.com/mar10/fancytree/
[10] TypeScript: http://www.typescriptlang.org/
[11] LESS: http://www.lesscss.org/
[12] Composite: http://andrey.moveax.ru/patterns/oop/structural/composite/
[13] дочерние: http://htmlbook.ru/samcss/dochernie-selektory
[14] jsperf: http://jsperf.com/innerhtml-vs-removechild
[15] github.com/resnyanskiy/js.tree: https://github.com/resnyanskiy/js.tree
[16] nuget.org/packages/resnyanskiy.js.tree: https://nuget.org/packages/resnyanskiy.js.tree
[17] Источник: http://habrahabr.ru/post/183434/
Нажмите здесь для печати.