jstree的CDNJS地址的相关链接:
(1):js
(2):css
jstree的简单使用
1:引入css
2:引入js
3:html内容:
父节点1子节点1子节点2父节点2子节点3子节点4
4:使用jstree
$(function () {
$('#jstree').jstree({});
});
如上就可以实现树形结构,如下:
上面已经简单的了解了jstree的使用,当我们的树形结构数据来源接口时,实现如下:
1:html内容:
2:使用jstree
$('#jstree').jstree({
"core" : {
"check_callback" : true,
"data": function (obj, cb) {
$.getJSON("/jstree/tree.php", function (json) {
if (json.type == 'success') {
cb.call(this, json.data);
}
});
}
},
});
3:后端(php):
$data = [
[
'id' => 0,
'parent' => '#',
'text' => '父级',
'state' => ['opened' => 'true'],
'a_attr' => [
'title' => '父级',
'class' => 'data-table-load',
'data-url' =>'/user/index',
]
],
[
'id' => 1,
'parent' => 0,
'text' => '子级',
'state' => ['opened' => 'true'],
'a_attr' => [
'title' => '子级',
'class' => 'data-table-load',
'data-url' => ''/user/index?id=1',
]
]
];
return ['type' => 'success', 'data' => $data];
根据如上就可以实现从接口获取数据实现树形结构