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();
