100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > php 实现树状组织图插件 使用jstree插件实现树形结构

php 实现树状组织图插件 使用jstree插件实现树形结构

时间:2021-10-02 23:18:46

相关推荐

php 实现树状组织图插件 使用jstree插件实现树形结构

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];

根据如上就可以实现从接口获取数据实现树形结构

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。