Aug 07 2008

Javascript Tree — примеры реализаций деревьев на яваскрипте

Category: JavascriptIgor @ 07:54

Была задача создать дерево на javascript. Для это искал готовые решения, и по ходу собрал подборку различных примеров javascript tree с использованием популярных библиотек: jQuery, Mootools, ExtJs, Dojo и других решений.

Javascript Tree for jQuery:

С Drop & Drag:

A tree component based on jQuery
Demo | Download | Documentation

SimpleTree Plugin
Demo | Download | Documentation

Interface lightweight JavaScript library for jQuery
Demo | Download | Documentation

nestedsortables
Demo | Download | Documentation

jTree
Demo | Download

Без Drop & Drag:

jQuery plugin: Treeview
Demo | Download | Documentation

jQuery File Tree
Demo | Download | Documentation

Other:
jQuery treeView


Javascript Tree for Mootools:

Mif.Tree
Demo | Download | Documentation

mooTree 2
Demo | Download | Пример на русском

TreeWidget
Demo | Download | Documentation

Tree Component for MooTools
Demo | Download

Other:
Nested Sortable Lists using Mootools


Javascript Tree for Prototype:

Scriptaculous Sortable Draggable
Demo | Download | Documentation


Другие решения:

DHTML eXtension dhtmlxTree
Demo | Download | Documentation

EXT JS Tree
Download | Tutorial:Ext20 Tree TreeLoader PHP MySQL
Demo:
1. http://extjs.com/deploy/dev/examples/tree/reorder.html
2. http://extjs.com/deploy/dev/examples/tree/two-trees.html
3. http://extjs.com/deploy/dev/examples/tree/column-tree.html
4. http://extjs.com/deploy/dev/examples/tree/xml-tree-loader.html

Yahoo! UI Library: TreeView
Demo | Download | Documentation

Dojo dijit.Tree
Demo | Download | Documentation | dijit.Tree and dojo.data in Dojo 1.1

Folder trees by dhtmlgoodies.com
Demo | Download | Documentation

XLoadTree
Demo | Download | Documentation

http://www.blueshoes.org/en/javascript/tree/
Dragging and dropping table rows in Javascript
AjaxRain tag tree
FileTreePanel Client-Server Interface Specification

Погуглить:
• javascript Drag and Drop tree
• javascript Drag and Drop Sortable Tree
• javascript Nested Sortable Tree
• javascript Nested Sortable Lists

Tags: , , ,

6 Responses to “Javascript Tree — примеры реализаций деревьев на яваскрипте”

  1. Evgen says:

    Полезная инфа, спасибо. Но вот вопрос, мне необходимо реализовать возможность перетягивания элементов, но например запретить перетягивать ниже какого-то уровня, это можна реализовать?

  2. Oscuro says:

    Вы имеете в виду ограничить глубину дерева (вложенность)?

    В «DHTML eXtension dhtmlxTree» такая возможность есть.

  3. Александр says:

    Ищу как раз дерево
    списабо за разнообразия решения

  4. Дмитрий says:

    спасибо, очень помогло. только вопрос в другом: как допустим Interface lightweight JavaScript library for jQuery прикрутить к mysql. т.е. когда я меняю положение элемента в дереве нужно что бы и в базе сменился его порядковый номер, подскажите где можно подробнее почитать? (желательно на (русском). спасибо

  5. XMpress says:

    Из всего только 1 ссылка рабочая остальное битое, то что касает раздела Jquery, демо варианты

Leave a Reply to Александр