JQuery.Treeview dropdown

Introduction

In the course of the implementation of the current project, I got a drop-down tree. Since I already used jQuery TreeView plugin, and its functionality suits me, it was decided to make a drop down tree based on it. As a result, the DropDownTreeView plugin was born that I want to share .

Functional

The plugin allows you to create drop-down trees with AJAX loading ( example ). When creating a tree, a tree opening button is added to the wrapper object, and the tree is loaded. The tree can be loaded as a whole or in parts (important for large trees). HTTP requests can be executed POST and GET methods. HTTP request parameters are user defined. The tree is built using jQuery.Treeview. The tree collapses when you select an item and click outside the tree.

Examples of use with the description

1. Add styles for jQuery.Treeview and jQuery.Treeview.DropDown
')

< link href ='jquery.treeview.css' type ='text/css' rel ='stylesheet' >
< link href ='jquery.treeview.dropdown.css' type ='text/css' rel ='stylesheet' />

2. Add jQuery, jQuery.Treeview and jQuery.Treeview.DropDown scripts

< script type ="text/javascript" >
$( function (){
$( '#dropdown' ).dropdowntreeview({},{'url':'test.php'});
}) //$(function()
</ script >


3. Add HTML code for the drop-down TreeView container.

< input type =' text ' id =' dropdown ' >

4. Tree loading

Call format: $ (selector) .dropdowntreeview (param, option, TreeViewOption)
Where:

1. param - JSON parameters for requests via AJAX
   
   Example: attr = {'my_id': 101, 'parent_id': 89} then we get an HTTP request with the parameters “my_id = 101 & parent_id = 89”.
   
   Note: the parameter names should not be the same as the tag attribute names and option names described in the next paragraph.
   
   
2. option - JSON settings
   Possible settings:
   type - 'post' or 'get' (default is 'post')
   url - the address for the HTTP request for the tree (branch) (by default, the current address)
   width - the width of the selection field (by default, the width of the object to which the tree binds)
   height - the height of the selection field (the default is in CSS)
   
   Example: option = {'url' = '/ tree.php', 'height' = '400px'}
   
   
3. TreeViewOption - Treeview options (http://docs.jquery.com/Plugins/Treeview/treeview)

4.1. The code for loading the simplest tree.
4.1.1. Add JavaScript to load the simplest tree from the “test.php” address using the POST method

< script type ="text/javascript" >
$( function (){
$( '#dropdown' ).dropdowntreeview({},{'url':'test.php'});
}) //$(function()
</ script >

Note: the first parameter was left empty due to the fact that we do not need to pass any parameters using the request.


4.1.2. Test.php code:

<? php
//
? >
< ul class ="filetree" >
< li >< span class ="file" > 1 </ span ></ li >
< li >< span class ="folder" > 2 </ span >
< ul >
< li >< span class ="file" > 1 </ span ></ li >
< li >< span class ="file" > 2 </ span ></ li >

< li class ="closed" >< span class ="folder" > 3 </ span >
< ul >
< li >< span class ="file" > 1 </ span ></ li >
< li >< span class ="file" > 2 </ span ></ li >

< li >< span class ="file" > 3 </ span ></ li >
< li >< span class ="file" > 4 </ span ></ li >

</ ul >
</ li >
< li >< span class ="file" > 4 </ span ></ li >

</ ul >
</ li >
< li >< span > 3 </ span ></ li >


Note: added “filetree”, “file”, “folder” classes to the marked list for displaying file system icons.

4.2. Tree load parts
4.2.1. Add JavaScript code that will load a part of the tree using the POST request test.php? Tid = 0

< script type ="text/javascript" >
$( function (){
$( '#dropdown' ).dropdowntreeview({'tid':'0'},{'url':'test.php'},{collapsed: true });
}) //$(function()
</ script >


Note: the first parameter is the parameter passed by the request, the second parameter is the address for the request, the third parameter is the TreeView option (show minimized) .

4.2.2. Test.php code

<? php <br>// <br> $ x =$ _POST [ 'tid' ];<br> $ y =$ x + 1 ;<br> $ z =' < ul class ="temp" >< li class ="temp" ></ li ></ ul > ';<br>? > <br><br> < ul > <br> < li form ='portion' tid =' < ? php echo $ y ; ? > ' > <br> < span > 1- <? php echo $ x ; ? ></ span > <br> <? php echo $ z ; ? > <br> </ li > <br> < li form ='portion' tid =' < ? php echo $ y ; ? > ' > <br> < span > 2- <? php echo $ x ; ? ></ span > <br> <? php echo $ z ; ? > <br> </ li > <br> < li form ='portion' tid =' < ;? php echo $ y ; ? > ' > <br> < span > 3- <? php echo $ x ; ? ></ span > <br> </ li > <br> </ ul >

Note: if the “li” tag has descendants in the form of the “ul” and “li” tags with the “temp” class, then it will be displayed in a collapsed list. When expanding this list to the place of tags with the “temp” class, a new part of the list will be loaded with parameters taken from the parent “li” attributes of the same name.

That is, when opening the first branch, the list created by POST request test.php? Tid = 1 will be plunged into the place list of the class 'temp'; the list by POST request test.php? Tid = 2, etc. will open up after opening the second branch.

Links

A page with examples and descriptions of the Dropdowntreeview plugin.

Download a plugin with an example.

That's all. I hope my plugin will be useful to someone. Thanks for attention.