Phpæ éå±çº§å¹¶æ¾ç¤ºå±çº§æ°
ä»å¤©å¨å¤çéå½æ éå±çº§èåæ¶ï¼éå°ä¸ä¸ªç¨å¾®ç§èçé®é¢ï¼å¦ä½æ¾ç¤ºå½åèç¹æå¨çå±çº§æ°ã
åºè¯ä¸å¤è¯´ï¼æ们å
ç个ç´è§çæ éå±çº§ï¼
<?php // è¿éçarræ¯ç´æ¥ä»æ°æ®åºååºçï¼ä» ä½ä¸ºæµè¯æ°æ® $arr = array( array('id' => 1, 'name' => 'ä¸çº§èåa', 'pid' => 0),// pid ç¶çº§id array('id' => 2, 'name' => 'ä¸çº§èåb', 'pid' => 0), array('id' => 3, 'name' => 'äºçº§èåa', 'pid' => 1), array('id' => 4, 'name' => 'äºçº§èåb', 'pid' => 1), array('id' => 5, 'name' => 'äºçº§èåc', 'pid' => 2), array('id' => 6, 'name' => 'äºçº§èåd', 'pid' => 2), array('id' => 7, 'name' => 'ä¸çº§èåa', 'pid' => 3), array('id' => 8, 'name' => 'ä¸çº§èåb', 'pid' => 3), array('id' => 9, 'name' => 'å级èåa', 'pid' => 8), ); /** è·åææåèç¹ * @param $data ææèç¹æ°ç» * @param $id $pid ç¶çº§èç¹id * @param $level å±çº§ * @return array */ function getTree($data, $pid, $level = 0) { $list = array(); foreach ($data as $k => $v) { if ($v['pid'] == $pid) { $v['level'] = $level; $v['name'] = $v['name'].'('.($level+1).'级)'; // è¿éå¯ä»¥å 个å±çº§æ¬¡æ° $v['children'] = getTree($data, $v['id'], $level + 1); if ($v['children'] == null){ unset($v['children']); } $list[] = $v; } } return $list; } $menu = getTree($arr, 0, 0); $json = json_encode($menu); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style> *{ box-sizing: border-box; margin: 0;padding: 0; } *:before,*:after{ box-sizing: border-box; } ul, li { list-style: none; } .l_tree_container { width: 100%; height: 100%; box-shadow: 0 0 3px #ccc; margin: 13px; position: relative; } .l_tree { width: calc(100% - 44px); height: 100%; padding-left: 42px; } .l_tree_branch { width: 100%; height: 100%; display: block; padding: 13px; position: relative; } .l_tree_branch .l_tree_children_btn { width: 19px; height: 19px; background-color: #23b1f0; font-size: 14px; text-align: center; color: #ffffff; outline: none; border: 0; cursor: pointer; } ul.l_tree:before { content: ''; border-left: 1px dashed #999999; height: calc(100%); position: absolute; left: 10px; top: 0px; } .l_tree .l_tree_branch:last-child::before { content: ''; width: 3px; height: calc(100% - 24px); display: block; background-color: #ffffff; position: absolute; bottom: 0; left: -34px; } .l_tree, .l_tree_branch { position: relative; } .l_tree_branch::after { content: ''; width: 40px; height: 0; border-bottom: 1px dashed #000; position: absolute; right: calc(100% - 9px); top: 22px; } .l_tree_container>.l_tree::before, .l_tree_container>.l_tree>.l_tree_branch::after { display: none; } </style> </head> <body> <div id="demo"> <div class="l_tree_container"> <ew-tree :model="testdata"></ew-tree> </div> </div> <script> // æ ç»ä»¶ Vue.component('ew-tree', { template: ` <ul class="l_tree"> <li class="l_tree_branch" v-for="item in model" :key="item.id"> <div class="l_tree_click"> <button type="button" class="l_tree_children_btn" v-if="item.children" @click="toggle(item)">{{ !item.show ? '-' : '+' }}</button> <span class="l_folder">{{ item.name }}</span> </div> <ew-tree v-show="!item.show" v-if="item.children" :model="item.children"></ew-tree> </li> </ul>`, props: { model: {} }, methods: { toggle: function (item) { var idx = this.model.indexOf(item) Vue.set(this.model[idx], 'show', !item.show) } } }); new Vue({ el: "#demo", data() { return { testdata: <?php echo $json?> } } }) </script> </body> </html>
æ们çå°ææèç¹å±çº§æ°æ²¡é®é¢ï¼é£ä¹æå¦ä½æ¥çèç¹ä¸pid=3çææèç¹å±çº§å ³ç³»å¢
$menu = getTree($arr, 3, 0);
æ¾ç¶ä¸å¯¹ï¼åµä¸èåå±ç¤ºå¹¶ä¸å好ï¼pid=3çç¶èç¹è³å°è¦æ¾ç¤ºå¨é¡¶å±å§ãå±çº§æ°æä¸ä¸ç®¡ï¼æ们å
解å³å¦ä½æ¾ç¤ºé¡¶å±pid=3çæ å½¢ç»æï¼
pid=3对åºçèç¹æ¯ï¼äºçº§èåaãè¿ä¸ªå¯ä»¥ç´æ¥æ ¹æ®æ°æ®idæ¥è¯¢åºæ¥ï¼æ¤å¤ä»
åæ¼ç¤ºåãè°æ´ä¸ä»£ç ï¼
$menu = getTree($arr, 3, 0); $menu = array(['name' => 'äºçº§èåa','children'=> $menu]); $json = json_encode($menu);
OKï¼å®ç¾ï¼åæ ·è¦æ¾ç¤ºææpid=1çèç¹å±çº§å ³ç³»ï¼ä¸æ ·ï¼pid=1对åºçèç¹æ¯ ä¸çº§èåa
$menu = getTree($arr, 1, 0); $menu = array(['name' => 'ä¸çº§èåa','children'=> $menu]); $json = json_encode($menu);
好ï¼åå° åæçè¯é¢ï¼å¦ä½æ£ç¡®çæ¾ç¤ºæ¯ä¸ªèç¹æå¨çå±çº§æ°å¢ï¼ è¿éæä¹æèäºå¾ä¹
ï¼ä¹æ²¡æ¾å°å¿«æ·çæ¹æ³ã
æç»æè¿æ¯éå½çæ¥è¯¢æ¬èç¹ææçç¶èç¹idéåï¼å®æ´ä»£ç å¦ä¸ï¼
<?php // è¿éçarræ¯ç´æ¥ä»æ°æ®åºååºçï¼ä» ä½ä¸ºæµè¯æ°æ® $arr = array( array('id' => 1, 'name' => 'ä¸çº§èåa', 'pid' => 0),// pid ç¶çº§id array('id' => 2, 'name' => 'ä¸çº§èåb', 'pid' => 0), array('id' => 3, 'name' => 'äºçº§èåa', 'pid' => 1), array('id' => 4, 'name' => 'äºçº§èåb', 'pid' => 1), array('id' => 5, 'name' => 'äºçº§èåc', 'pid' => 2), array('id' => 6, 'name' => 'äºçº§èåd', 'pid' => 2), array('id' => 7, 'name' => 'ä¸çº§èåa', 'pid' => 3), array('id' => 8, 'name' => 'ä¸çº§èåb', 'pid' => 3), array('id' => 9, 'name' => 'å级èåa', 'pid' => 8), ); /** è·åææåèç¹ * @param $data ææèç¹æ°ç» * @param $id $pid ç¶çº§èç¹id * @param $level å±çº§ * @return array */ function getTree($data, $pid, $level = 0) { $list = array(); foreach ($data as $k => $v) { if ($v['pid'] == $pid) { $v['level'] = $level; $v['name'] = $v['name'] . '(' . ($level + 1) . '级)'; // è¿éå¯ä»¥å 个å±çº§æ¬¡æ° $v['children'] = getTree($data, $v['id'], $level + 1); if ($v['children'] == null) { unset($v['children']); } $list[] = $v; } } return $list; } /** æ ¹æ®åèç¹è·åç¶èç¹id * @param $data ææèç¹æ°ç» * @param $id id 主é®id * @return array */ function getParentid($data, $id) { $arr = array(); foreach ($data as $v) { if ($v['id'] == $id) { $arr[] = $v; //$arr[$v['id']]=$v['name']; $arr = array_merge(getParentid($data, $v['pid']), $arr); } } return $arr; } $id = 8 ; // 对åºçèç¹æ¯: ä¸çº§èåb 对åºçpid æ¯ 3 $pid = 3; // 对åºçèç¹æ¯ äºçº§èåa $toparr = getParentid($arr, $id); // èç¹ä¸º8çææç¶èç¹ id: 1 3 8 è¿éå å«äºèªèº«ï¼æ³¨æåé¤ $level = count($toparr); // èç¹æå¨çå±çº§æ° $menu = getTree($arr, $pid, $level-1); if($pid) $menu = array(['name' => 'äºçº§èåa' . '(' . ($level-1) . '级)', 'children' => $menu]); $json = json_encode($menu); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style> * { box-sizing: border-box; margin: 0; padding: 0; } *:before, *:after { box-sizing: border-box; } ul, li { list-style: none; } .l_tree_container { width: 100%; height: 100%; box-shadow: 0 0 3px #ccc; margin: 13px; position: relative; } .l_tree { width: calc(100% - 44px); height: 100%; padding-left: 42px; } .l_tree_branch { width: 100%; height: 100%; display: block; padding: 13px; position: relative; } .l_tree_branch .l_tree_children_btn { width: 19px; height: 19px; background-color: #23b1f0; font-size: 14px; text-align: center; color: #ffffff; outline: none; border: 0; cursor: pointer; } ul.l_tree:before { content: ''; border-left: 1px dashed #999999; height: calc(100%); position: absolute; left: 10px; top: 0px; } .l_tree .l_tree_branch:last-child::before { content: ''; width: 3px; height: calc(100% - 24px); display: block; background-color: #ffffff; position: absolute; bottom: 0; left: -34px; } .l_tree, .l_tree_branch { position: relative; } .l_tree_branch::after { content: ''; width: 40px; height: 0; border-bottom: 1px dashed #000; position: absolute; right: calc(100% - 9px); top: 22px; } .l_tree_container > .l_tree::before, .l_tree_container > .l_tree > .l_tree_branch::after { display: none; } </style> </head> <body> <div id="demo"> <div class="l_tree_container"> <ew-tree :model="testdata"></ew-tree> </div> </div> <script> // æ ç»ä»¶ Vue.component('ew-tree', { template: ` <ul class="l_tree"> <li class="l_tree_branch" v-for="item in model" :key="item.id"> <div class="l_tree_click"> <button type="button" class="l_tree_children_btn" v-if="item.children" @click="toggle(item)">{{ !item.show ? '-' : '+' }}</button> <span class="l_folder">{{ item.name }}</span> </div> <ew-tree v-show="!item.show" v-if="item.children" :model="item.children"></ew-tree> </li> </ul>`, props: { model: {} }, methods: { toggle: function (item) { var idx = this.model.indexOf(item) Vue.set(this.model[idx], 'show', !item.show) } } }); new Vue({ el: "#demo", data() { return { testdata: <?php echo $json?> } } }) </script> </body> </html>
åæ ·è¦æ¾ç¤ºææèç¹ï¼ç´æ¥æpidèµå¼0ï¼æ¯å¦ï¼
$id = 2 ; // 对åºçèç¹æ¯: ä¸çº§èåb 对åºçpid æ¯ 0 $pid = 0; // 对åºçèç¹æ¯ 0 为 ä¸çº§èç¹ æ¾ç¤ºææèç¹ï¼ä¸é¢ç$idç¨ä¸å° $toparr = getParentid($arr, $id); // $level = count($toparr); // èç¹æå¨çå±çº§æ° $menu = getTree($arr, $pid, $level-1); if($pid) $menu = array(['name' => 'äºçº§èåa' . '(' . ($level-1) . '级)', 'children' => $menu]); $json = json_encode($menu);
çèµ·æ¥æ²¡æ¯ç ï¼åå们å¦ææ好çåæ³è·åä»»æä¸ä¸ªèç¹æå¤çå±çº§æ°ï¼æ¬¢è¿æç çè¨åã