欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

bootstrap Treeview 树形结构 无限极二维数组层级关系

程序员文章站 2022-06-30 11:46:56
// 结果 我这里数据有点少 但是基本上看的清楚 如果还有 子类 孙子类 都会追加到相应的父类后面 前台展示 效果: 图一开始忘记上了 后加的!效果就是这个效果 ......
 1 private function getarea(){
 2     $post_data = array();
 3     $result = $this->send_post('请求数据地址/?msgid=121&authkey=webuser&accountid='.$_session['id'].'&projectid='.$_session['projectid'].'',$post_data);
 4     $volist = json_decode($result,true);
 5     
 6     // 这一段应该是很通俗的,就是构建一个新的数组,新数组的key值是自己的主键id值进行完这一步之后  这步很重要
 7     $items = array();
 8     foreach($volist['regions'] as $v){
 9         $items[$v['id']] = $v;
10     }
11    
12       
14 
15     
16     # 第一步先简化数组 只要直接想要的几个字段   我这里需要 不需要的可以不用
17     $newdata = array();
18     foreach($items as $ke=>$it){
19         $newdata[$ke]['id'] = $it['id'];
20         $newdata[$ke]['text'] = $it['name'];
21         $newdata[$ke]['parentid'] = $it['parentid'];
22         $newdata[$ke]['projectid'] = $it['projectid'];
23         $newdata[$ke]['projectname'] = $it['projectname'];
24     }
25 
26     # 第二步 
27     # 先找到这个新数组中有没有这个key 如果没有 
28     $tree = array();
29     foreach($newdata as $k => $item){
30         // 其实这里 "$newdata[$item['parentid']]" 就是newdata的下标,上面已经把每条信息的 id改成了自己的key  因为id= parentid
31         // 找到原数组 中上下关系字段 如果是0 肯定是false 则就是*
32         if(isset($newdata[$item['parentid']])){
33             $newdata[$item['parentid']]['nodes'][] = &$newdata[$k];  
34             // 若不为真 把这条数据拿到key等于这条数据的parentid的下面 自定义下标名称并且多加一个"[]"万一这个id下面的子类有多个
35         }else{
36             $tree[] = &$newdata[$k];  // *
37         }
38     }
39     echo json_encode($tree);
40 }

// 结果  我这里数据有点少 但是基本上看的清楚 如果还有 子类 孙子类 都会追加到相应的父类后面

 1 
 2 array(3) {
 3   [0] => array(6) {
 4     ["id"] => int(49)
 5     ["text"] => string(12) "车身车间"
 6     ["parentid"] => int(0)
 7     ["projectid"] => int(16)
 8     ["projectname"] => string(12) "南京大通"
 9     ["nodes"] => array(1) {
10       [0] => array(5) {
11         ["id"] => int(75)
12         ["text"] => string(3) "456"
13         ["parentid"] => int(49)
14         ["projectid"] => int(16)
15         ["projectname"] => string(12) "南京大通"
16       }
17     }
18   }
19   [1] => array(6) {
20     ["id"] => int(50)
21     ["text"] => string(12) "冲压车间"
22     ["parentid"] => int(0)
23     ["projectid"] => int(16)
24     ["projectname"] => string(12) "南京大通"
25     ["nodes"] => array(1) {
26       [0] => array(5) {
27         ["id"] => int(78)
28         ["text"] => string(3) "666"
29         ["parentid"] => int(50)
30         ["projectid"] => int(16)
31         ["projectname"] => string(12) "南京大通"
32       }
33     }
34   }
35   [2] => array(5) {
36     ["id"] => int(82)
37     ["text"] => string(12) "总装车间"
38     ["parentid"] => int(0)
39     ["projectid"] => int(16)
40     ["projectname"] => string(12) "南京大通"
41   }
42 }

 

 

前台展示

1 <link rel="stylesheet" type="text/css" href="css/pagination.css" media="screen">
2 <div class="ibox-content" style="height:500px">
3     <div id="treeview5" class="test"></div>
4 </div>

 

 1 // 活数据 页面只需引入js
 2 <script src="js/plugins/treeview/bootstrap-treeview.js"></script>    
 3 # 页面显示 ajax获取转换后的数据
 4 var defaultdata='';
 5 $(function () {
 6     $.ajax({
 7         type: 'post',
 8         url: '__url__/getarea',
 9         async: false,
10         datatype: 'json',
11         success: function (d) {
12             defaultdata = d;
13         }
14     });
15 
16     
17     # 显示在指定位置
18     $('#treeview5').treeview({
19         levels: 4,      // 这里设置树形结构 默认展开几层
20         color: "#428bca",
21         expandicon: 'glyphicon glyphicon-chevron-right',
22         collapseicon: 'glyphicon glyphicon-chevron-down',
23         nodeicon: '',
24         showtags: false,
25         data: defaultdata,
26     });
27 });


效果: 图一开始忘记上了 后加的!效果就是这个效果

bootstrap Treeview  树形结构 无限极二维数组层级关系