Question

我有一个包含多个产品类别的产品数据库。每个类别都有许多子类别，这些子类别具有子子类别，这些子类别具有......嗯，相当一定程度。树太大而无法一次加载，因此我需要在用户选择特定产品类别时动态构建它。这是产品树的快照。最初，只加载第一级。当用户点击cat时，会添加第二级（Cat.1.1和cat.1.2）。 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中获取子类别列表，该URL将父产品类别ID作为输入，并以treeview所需的格式输出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); } )
      }
   }); 

});

我遇到的问题是点击事件。点击cat 1.1时。为了更深层次地扩展它，它仍然返回顶级产品类别的ID。

如何更改点击事件，以便返回点击的<LI>而不是最高点的ID？

如果产品类别没有任何子类别，如何删除<UL></UL>，从而导致树无法进一步扩展？

Answer 1

~~要返回一个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();
                }
              }
           );
        }
     }

   });

如何在动态构建的JQuery Treeview中获取被点击的元素？

1 个答案: