https://github.com/daredevel/jquery-tree

jQuery Tree Widget
https://github.com/daredevel/jquery-tree

Last synced: 3 months ago
JSON representation

jQuery Tree Widget

• Host: GitHub
• URL: https://github.com/daredevel/jquery-tree
• Owner: valeriogalano
• License: mit
• Created: 2011-06-28T08:44:15.000Z (over 13 years ago)
• Default Branch: master
• Last Pushed: 2017-09-04T14:32:13.000Z (about 7 years ago)
• Last Synced: 2024-05-21T22:17:59.730Z (6 months ago)
• Language: JavaScript
• Homepage: http://www.daredevel.com/jquery-tree-widget
• Size: 126 KB
• Stars: 118
• Watchers: 13
• Forks: 52
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-jquery - jquery-tree - jQuery Tree Widget (Folder Structure / Data Table)

README

        
# About

daredevel's jQuery Tree is a jQuery UI widget that you can use to add advanced features to an html tree built using nested unordered lists.

It's designed to be fast, lightweight, simple to deploy and setup and highly configurable.

* [live demo] (http://htmlpreview.github.io/?https://github.com/daredevel/jquery-tree/blob/master/index.html)

* [documentation] ([http://www.daredevel.com/jquery-tree-widget/](https://web.archive.org/web/20161106222353/http://www.daredevel.com/jquery-tree-widget))

# Features

* lightweight (less than 16Kb for minified version)

* tree manipulation methods

* collapse/expand (derived from jQuery checkboxtree plugin)

* advanced checkbox logic (derived from jQuery checkboxtree plugin)

* support for context menu

* support for ajax

* support for drag and drop

# Changelog

### 0.1 (coming soon):

* initial release

# Quickstart

First of all, let's setup plugin initialization into html head section:

    

    

    

    

    

    

    

    

    

        //<!--

        $(document).ready(function() {

            $('#tree').tree({

                /* specify here your options */

            });

        });

    //-->

    

    

Now, we can build our tree into html body section:

    

    


        


            


                Node 1

                


                    


                        Node 1.1

                        


                            
Node 1.1.1

                        

                    

                

                


                    


                        Node 1.2

                        


                            
Node 1.2.1

                            
Node 1.2.2

                            


                                Node 1.2.3

                                


                                    
Node 1.2.3.1

                                    
Node 1.2.3.2

                                

                            

                            
Node 1.2.4

                            
Node 1.2.5

                            
Node 1.2.6

                        

                    

                

            

            


                Node 2

                


                    


                        Node 2.1

                        


                            
Node 2.1.1

                        

                    

                    


                        Node 2.2

                        


                            
Node 2.2.1

                            
Node 2.2.2

                            


                                Node 2.2.3

                                


                                    
Node 2.2.3.1

                                    
Node 2.2.3.2

                                

                            

                            
Node 2.2.4

                            
Node 2.2.5

                            
Node 2.2.6

                        

                    

                

            

        

    

    

    

    

Please, refer to documentation for details.