PHP循环构造目录树结构
<ul>
<php>
function digui($fid,$level){
$class=M("wangpan_class")->where('fid='.$fid)->select();
foreach($class as $v){
$child=M("wangpan_class")->where('fid='.$v['id'])->select();//如果不为空，表示有子类
if(!empty($child)){
echo "<li>".str_repeat(" ",$level)."┗".$v['name']."<ul>";
}else{
echo "<li>".str_repeat(" ",$level)."┗".$v['name']."</li>";
}
digui($v['id'],$level+1);
if(!empty($child)){
echo "</ul></li>";//如果有子类才输出ul / li
}
} }
digui(0,0); </php>
</ul>
jsTree DEMO
实现点击获取节点ID，实现配置复选框
/*jsTree代码begin */
$('#jstree').jstree();
$("#jstree").jstree({
"types" : {
"default" : {
"icon" : "glyphicon glyphicon-flash"
},
"demo" : {
"icon" : "glyphicon glyphicon-ok"
}
},
"plugins" : [ "types" ]
}); // 7 bind to events triggered on the tree /* 开启checkbox
$("#jstree").jstree({
"checkbox" : {
"keep_selected_style" : false
},
"plugins" : [ "checkbox" ]
});*/
$("#plugins")
.on("changed.jstree", function (e, data) {
console.log(data.changed.selected); // newly selected
console.log(data.changed.deselected); // newly deselected
})
.jstree({
"plugins" : [ "changed" ]
}); $('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
var id = $(e.target).html();
// alert(id);
});
$('#jstree').bind("activate_node.jstree", function (obj, e) {
// 获取当前节点
alert(e.node.id);//得到被点击节点的id
}); /*end jsTree*/
https://www.jstree.com/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsTree test</title>
<!-- 2 load the theme CSS file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>
<!-- 3 setup a container element -->
<div id="jstree">
<!-- in this example the tree is populated from inline HTML -->
<ul>
<li>Child node 0-1</li>
<li>Child node 0-2</li>
<li>Child node 0-3</li>
<li>Root node 1
<ul>
<li>Child node 1-1</li>
<li>Child node 1-2</li>
<li>Child node 1-3</li>
</ul>
</li>
<li>Root node 2
<ul>
<li>Child node 2-1<ul>
<li>Child node 2-3-1</li>
<li>Child node 2-3-2</li>
<li>Child node 2-3-3</li>
</ul></li>
<li>Child node 2-2</li>
<li>Child node 2-3
<ul>
<li>Child node 2-3-1</li>
<li>Child node 2-3-2</li>
<li>Child node 2-3-3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<button>demo button</button> <!-- 4 include the jQuery library -->
<script src="dist/libs/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<!-- 5 include the minified jstree source -->
<script src="dist/jstree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
$(function () {
// 6 create an instance when the DOM is ready
$('#jstree').jstree();
// 7 bind to events triggered on the tree
$('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
// 8 interact with the tree - either way is OK
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
}); });
</script>
</body>
</html>
jstree官网：https://www.jstree.com/