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/
1.需要导入的文件
<link rel="stylesheet" href="dist/themes/default/style.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script><script src="dist/jstree.min.js"></script>
2.在页面上创建一个jstree容器（div）
<div id="jstree_demo_div"></div>3.创建一个jstree实例
<script type="text/javascript">
$('#jstree_demo_div1').jstree({'plugins':["wholerow","checkbox"], 'core' : {
'data' : [
{
"text" : "Same but with checkboxes",
"children" : [
{ "text" : "initially selected", "state" : { "selected" : true } },
{ "text" : "custom icon URL"},
{ "text" : "initially open", "state" : { "opened" : true }, "children" : [ "Another node" ] },
{ "text" : "custom icon class"}
]
},
"And wholerow selection"
]
}});
</script>效果：
4.ajax动态加载jstree$.getJSON("/FIMS/api/rest/RolePermission/loadPermissionTreeData",{ts_role_id:ts_role_id}, function(json){
$('#rolePermissionTree').jstree({'plugins':['checkbox'], 'core' : {
'data' : json.datalist
}});
}
);
5.清空树（数据库的信息更新后想要刷新树，先要清空树）
$('#perjstree').data('jstree', false).empty();6.绑定节点点击事件
$('#orgjstree').bind("activate_node.jstree", function (obj, e) {
// 获取当前节点
alert(e.node.id);//得到被点击节点的id
});7.得到所有被选中的节点的id（先加上'plugins':["checkbox"]，使所有的节点前面加上checkbox）
var ids = $('#rolePermissionTree').jstree().get_checked();
