刚过完年这段时间没什么项目,好不容易有这样的时间,所以就找到以前公司大神列出的需要掌握的
技术自己学习一下,并将成果及刚才遇到了问题,在这里记录一下
生成jstree有两种方法,一种是直接在HTML中编写显示,另一种是用js传值
方法一 直接在HTML中编写
<div id="demo1">
<ul>
<li data-jstree='{"opened":true}'>根目录
<ul>
<li data-jstree='{"selected":true}'>子目录1</li>
<li>子目录</li>
</ul>
</li>
</ul>
</div>
方法二 利用js传值
<div id="demo2"></div>
<script>
$('#demo2').jstree({
'core':{
'data':[
{
"text":"根目录",
"state":{"opened":true},
"children":[
{
"text":"子目录",
"selected":true
},
{"text":"子目录"}
]
}
]
}
});
</script>
这种方法不仅可以直接传值,还可以发请求获取数据
两种方法得到的最终结果都是这样的
通过请求url获取数据
html内容如下:
<body>
<div id="demo3"></div>
</body>
js内容如下:
$('#demo3').jstree({
"core":{
"data":{
"url":"demo.json",
"dataType":"json"
}
}
});
demo.json内容如下:
[
{
"text":"根目录",
"state":{"opened":true},
"children":[
{"text":"子目录"},
{"text":"子目录"}
]
}
]