使用jQuery绘制JSON树结构而不使用树jQuery插件

时间:2014-05-20 10:27:48

标签: javascript jquery jquery-plugins

我正在尝试为我的Spring MVC应用程序开发常见问题解答页面。事实上,我将常见问题解答作为树结构,当我点击其中一个问题时。我必须能够在使用AJAX的另一个答案窗格中看到答案。

因为我想绘制一个tree结构而不使用除主jquery库之外的任何jquery tree plugin,所以jquery树插件因为它几乎 87K 而我的web应用程序没有由于它的大小,需要包括它,并且出于某种原因我不知道缩小版本是什么?

但是,我想使用Jquery.min.js.或纯java脚本(如果availbel而不是tree.jquery.js绘制问题的常见问题树,如果你想在你的项目中添加它,它会做得非常好

如果你愿意,我会添加json问题数据。

感谢任何帮助,谢谢!

1 个答案:

答案 0 :(得分:2)

这是一种方法:

树存储在具有值的Javascript对象中:

“link”=网址 “title”=要显示的文字 “subOptions”=此列表下的另一个树列表选项

像这样......

var tree=[
    {title:"One",link:"One.html",
         subOptions:[{title:"oneA",link:"OneA.ht,l"},
                     {title:"oneB",link:"OneB.html"}]
     },
    {title:"Two",link:"Two.html"},
    {title:"Three",link:"three.html"},
    ];

然后是一个小函数,以递归方式遍历树并使用for indent构建HTML树。

的jsfiddle: http://jsfiddle.net/tEgRL/4/

添加您自己的属性以增强它,并根据您的需要设置样式。

这显然是非常基本的,但它确实绘制了一个带链接的树,可用作菜单。

在提出这个问题的时候,我意识到实际上你并没有多说你希望树看起来像什么或者它用于什么,我认为你的意思是“菜单”类型的选项树。 / p>