Выпадающий jQuery.Treeview

Вступление

В ходе реализации текущего проекта мне понабилось выпадающее дерево. Так как я уже пользовался jQuery плагином TreeView, и его функционал меня устраивает, было принято решение cделать выпадающее дерево на его основе. В результате родился плагин DropDownTreeView которым я хочу поделится.

Функционал

Плагин позволяет создавать выпадающие деревья с AJAX загрузкой (пример). При создании дерева к объекту обертки добавляется кнопка открытия дерева, и подгружается дерево. Дерево можно подгружать как целиком так и частями (актуально для больших деревьев). HTTP запросы могут выполнятся POST и GET методами. Параметры HTTP запроса определяются пользователем. Дерево строится посредством jQuery.Treeview. Дерево сворачивается при выборе пункта и клике вне зоны дерева.

Примеры использования с описанием

1. Добавляем стили для jQuery.Treeview и 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. Добавляем скрипты jQuery, jQuery.Treeview и jQuery.Treeview.DropDown

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


3. Добавляем HTML код для контейнера выпадающего TreeView.

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

4. Загрузка дерева

Формат вызова: $(selector).dropdowntreeview(param,option,TreeViewOption)
где:

1. param — параметры в формате JSON для запросов посредством AJAX
   
   Пример: attr={'my_id':101, 'parent_id':89} то получим HTTP запрос с параметрами “my_id=101&parent_id=89”.
   
   Примечание: имена параметров не должны совпадать с именами атрибутов тегов и с именами опций описанных в следующем пункте.
   
   
2. option — настройки в формате JSON
   Возможные настройки:
   type — 'post' или 'get' (по умолчанию 'post')
   url — адрес для HTTP запроса дерева (ветки) (по умолчанию текущий адрес)
   width — ширина поля выбора (по умолчанию по ширине объекта к которому привязывается дерево)
   height — высота поля выбора (по умолчанию задана в CSS)
   
   Пример: option={'url'='/tree.php','height'='400px'}
   
   
3. TreeViewOption — опции Treeview (http://docs.jquery.com/Plugins/Treeview/treeview)

4.1. Код для подгрузки простейшего дерева.
4.1.1. Добавляем JavaScript для загрузки простейшего дерева с адрeса «test.php» методом POST

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

Примечание: первый параметр оставили пустым в связи с тем что никаких параметров с помощью запроса нам передавать не нужно.


4.1.2. Код test.php:

<?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>


Примечание: в маркированный список добавил классы “filetree”, “file”, “folder” для отображения пиктограмм файловой системы.

4.2. Дерево загружаемое частями
4.2.1. Добавляем JavaScript код, который подгрузит часть дерева посредством POST запроса test.php?tid=0

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


Примечание: первый параметр — параметр передаваемый запросом, второй параметр — адрес для запроса, третий параметр – опция TreeView (показывать свернутым).

4.2.2. Код test.php

<?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='&#60;?php echo $y; ?>'><br>     <span>Пункт3-<?php echo $x; ?></span><br>  </li><br></ul>

Примечание: если у тега “li” есть потомки в виде тега “ul” и “li” c классом “temp” то он будет отображаться свернутым списком. При разворачивании этого списка на место тегов с классом “temp” загрузится новая часть списка с параметрами взятыми из одноимённых атрибутов тега “li” родителя.

То есть при раскрытии первой ветви на место списка класса ‘temp’ погрузится список созданный по POST запросу test.php?tid=1 при раскрытии второй ветки раскроется список по POST запросу test.php?tid=2 и т.д.

Ссылки

Страница с примерами и описанием плагина Dropdowntreeview.

Скачать плагин с примером.

Вот вроде и всё. Надеюсь мой плагин кому-нибудь пригодится. Спасибо за внимание.