使用jsTree树形控件【3】HTML结构
基本结构
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>使用class设置节点的初始状态
可以设置<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属性设置节点的初始状态
还可以通过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>使用ajax异步加载
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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016.03.04 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录