使用jstree插件实现树形结构

jstree的github地址：https://github.com/vakata/jstree

jstree的CDNJS地址的相关链接：

(1)：js

https://cdnjs.cloudflare.com/...

(2)：css

https://cdnjs.cloudflare.com/...

jstree的简单使用

1：引入css

2：引入js

3：html内容：

  
    
  
        
父节点1  
            
  
                
子节点1
  
                
子节点2
  
            
  
        
  
        
父节点2  
            
  
                
子节点3
  
                
子节点4
  
            
  
        
  
    
  
  

4：使用jstree

如上就可以实现树形结构，如下：

上面已经简单的了解了jstree的使用，当我们的树形结构数据来源接口时，实现如下：

1：html内容：

2：使用jstree

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

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