Как получить выбранный элемент в динамически построенном JQuery Treeview? - PullRequest
Новая
       16

Как получить выбранный элемент в динамически построенном JQuery Treeview?

0 голосов
/ 09 апреля 2010

У меня есть база данных товаров с несколькими категориями товаров.У каждой категории есть несколько подкатегорий, у которых есть подкатегории, у которых есть ... Ну, довольно глубокие уровни.Дерево слишком велико для одновременной загрузки, поэтому мне нужно строить его динамически, так как пользователи выбирают определенные категории продуктов.Вот снимок дерева продуктов.Изначально загружается только первый уровень.Второй уровень (Cat. 1.1 и Cat. 1.2) добавляется, когда пользователь нажимает на cat.1: 

<ul id="navigation">
   <li id="625212">Product cat. 1
      <ul>
         <li id="625213">Product cat. 1.1
            <ul></ul>
         </li>
         <li id="625109">Product cat. 1.2
            <ul></ul>
         </li>
      </ul>
   </li>
   <li id="624990">Product cat. 2
      <ul></ul>
   </li>
</ul>

Я намерен расширить дерево, когда пользователи нажимают на определенные категории продуктов.Я могу получить список подкатегорий по URL-адресу, который принимает идентификатор родительской категории продукта в качестве входных данных и выводит HTML в формате, необходимом для дерева.Я не могу использовать PHP и должен заставить это работать с событием .click ().Вот код, который у меня есть: 

$(document).ready(function(){

   function doSomethingWithData(htmldata, id) {
      var branches = $(htmldata).appendTo("#navigation #"+id+" ul");
      $("#navigation").treeview({ add: branches });
   } 

   $("#navigation").treeview({
      collapsed: true,
      unique: true,
      persist: "location"
   });

   $("#navigation li[id]").click(function() {
      var id=$(this).attr("id");
      if ($("#"+$(this).attr("id")+" ul li").size()==0) {
         $.get('someurl?id='+$(this).attr("id"), 
            function(data) { doSomethingWithData(data, id); } )
      }
   }); 

});

Проблема, с которой я столкнулся, связана с событием click.При нажатии на кошку 1.1.чтобы продлить его еще на один уровень, он по-прежнему возвращает идентификатор категории продукта верхнего уровня.

Как я могу изменить события щелчка, чтобы он возвращал идентификатор нажатого <LI> вместо верхнего?

Если категория продукта не имеет подкатегорий, как я могу удалить <UL></UL> и, таким образом, указать, что дерево не может быть расширено дальше?

1 Ответ

0 голосов
/ 09 апреля 2010

Чтобы вернуть только один LI, я думаю, вам придется использовать код ниже. Это будет соответствовать только дочернему элементу UL, то есть LI, по которому вы щелкнете. 

$('#navigation ul > li').click(function() {
      alert($(this).attr('id'));
});

Для удаления UL, можете ли вы просто проверить, возвращается ли что-либо в $ .get? Итак, я думаю, что ваша функция щелчка будет выглядеть примерно так:

ОБНОВЛЕНИЕ - Это выберет даже верхний ли: 

$('#navigation').click(function(e) {

     var element = $(e.target);
     if (element.context.nodeName === 'LI')
     {
       var id = element.attr('id');
       if ($('#' + id + ' ul li').size()==0) 
       {
           $.get('someurl?id='+ id, 
              function(data) 
              { 
                // data could = undefined or something else, just check what 
                // it looks like when it comes through empty and match that
                if (data != null) 
                {
                  doSomethingWithData(data, id);
                }       
                else
                {
                  $('#' + id).children('ul').remove();
                }
              }
           );
        }
     }

   });
...