jsTree可以将无序列表转换成树形结构,最简单的HTML结构就是使用<ul>
以及<li>
,而且最好外面还嵌套了一个<div>
$('#html1').jstree()
HTML结构如下:
<div id="html1">
<ul>
<li>Root node 1</li>
<li>Root node 2</li>
</ul>
</div>
可以使用<ul>
来创建父节点,在jsTree内部会将<li>
中的文本转换成链接,但是点击这个链接并不会定向到一个新的页面
<div id="html1">
<ul>
<li>Root node 1
<ul>
<li>Child node 1</li>
<li><a href="#">Child node 2</a></li>
</ul>
</li>
</ul>
</div>
可以设置<a>
元素的class为jstree-clicked
来选中相应节点,还可以设置<li>
元素的class为jstree-open
来展开子节
…
<li class="jstree-open" id="node_1">Root</li>
<ul>
<li>
<a href="#" class="jstree-clicked">Child</a>
</li>
</ul>
</li>
…
还可以通过data-jstree
属性设置节点的状态,可以使用下面的几个值的任意组合:opened
,selected
,disabled
,:
glyphicon glyphicon-leaf`。
<li data-jstree='{"opened":true,"selected":true}'>Root
<ul>
<li data-jstree='{"disabled":true}'>Child</li>
<li data-jstree='{"icon":"//jstree.com/tree.png"}'>
Child</li>
<li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>
Child</li>
</ul>
</li>
jsTree还支持通过AJAX异步加载节点,HMTL的结构还是一样的,唯一的区别是节点的HTML内容是从服务器返回的。
使用AJAX异步加载必须配置$.jstree.defaults.core.data
参数,ajax的参数与jQuery中的ajax请求类似。这里在返回的内
跟标准的AJAX请求不同的是,这个AJAX请求中,data
以及url
可以是个函数,只要函数返回相应的值即可。
$('#tree').jstree({
'core' : {
'data' : {
'url' : 'ajax_nodes.html',
'data' : function (node) {
return { 'id' : node.id };
}
}
});
// Example response:
<ul>
<li>Node 1</li>
<li class="jstree-closed">Node 2</li>
</ul>