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 "
       
".str_repeat("  ",$level)."┗".$v['name']."
        
         "; 			}else{				echo "
         
".str_repeat("  ",$level)."┗".$v['name']."
"; 				}             digui($v['id'],$level+1);			if(!empty($child)){			echo "
        
";//如果有子类才输出ul / li			}            }			        }		 digui(0,0);	  
      
     

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/

  
          
       
        
       
      
    
           
       
            
        
Child node 0-1
            
        
Child node 0-2
            
        
Child node 0-3
        
        
Root node 1        
         
            
          
Child node 1-1
            
          
Child node 1-2
            
          
Child node 1-3
        
         
        
        
        
Root node 2        
         
            
          
Child node 2-1
           
 
            
Child node 2-3-1
 
            
Child node 2-3-2
 
            
Child node 2-3-3
 
           
            
          
Child node 2-2
            
          
Child node 2-3            
           
 
            
Child node 2-3-1
 
            
Child node 2-3-2
 
            
Child node 2-3-3
 
           
            
        
         
        
    
       
      
  demo button  
            
            

 

jstree官网：

1.需要导入的文件

 

2.在页面上创建一个jstree容器（div）

3.创建一个jstree实例

效果：

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