如何在jsTree中加载子节点

时间:2010-10-29 10:20:42

标签: javascript jquery jstree

抱歉我的英语不好,我的系统想要将KoolTreeView的javascript树更改为jsTree,然后我阅读文档并实现它。结果是这样的

食品

* Fish
* Beef
* Chicken

我的javascript和div代码

<script class="source" type="text/javascript">
 $(function () {
  $("foodtree").jstree({
   "core" : { "initially_open" : [ "root" ] },
   "html_data" : {
     "ajax" : {
       "url" : "menu/menu/listfoodtree"
      }
   },
   "plugins" : [ "themes", "html_data" ]
  });
 });
</script>';

<div id="foodtree"></div>

关于“menu / menu / listfoodtree”的url创建了简单的html:

<li id="root"><span>Food</span>

<ul>
<li id="food14"><a href="menu/menu/listfish/1">Fish</a></li>
<li id="food13"><a href="menu/menu/listbeef/1/13">Beef</a></li>
<li id="food1"><a href="menu/menu/listchick/11">Chicken</a></li>
</ul>

</li>

结果显示正确(使用jsTree),我的理想想点击项目加载子节点,如下所示

# Food

    * Fish (href='/menu/menu/listfish/1')
      * Tuna
      * Salmon 
    * Beef
    * Chicken

现在我的url“/ menu / menu / listfish / 1”创建了简单的html:

<li id ='fish44'><span>Tuna</span></li>
<li id ='fish66'><span>Salmon</span></li>

但我不知道如何实现它,单击Fish并从url显示子节点。你能给我任何建议或指导吗?

1 个答案:

答案 0 :(得分:4)

在树标题中指定ajax url,它将nodeid作为参数传递。使用该nodeid,您应该为该节点传回新的json,树将把它作为子节点添加到所选节点。

父节点必须将其状态在json中定义为“state”:“open”或树不会调用服务器。

您不能为每个节点指定不同的URL,但您可以做的是为树指定主URL并将服务器页面重定向到您想要从中获取数据的URL。