* Example Modify the interface document module tree.

module/dev/control.php

@@ -28,7 +28,7 @@ class dev extends control
         $this->view->tab            = 'api';
         $this->view->selectedModule = $module;
         $this->view->apis           = $module ? $this->dev->getAPIs($module) : array();
-        $this->view->modules        = $this->dev->getModules();
+        $this->view->moduleTree     = $this->dev->getModuleTree($module);
         $this->display();
     }
 

module/dev/css/api.css

@@ -1,3 +1,8 @@
 #sidebar .module-tree, #mainContent .module-content {overflow-y: auto;}
 #mainContent .module-col {padding: 0;}
 #mainContent .module-content {padding: 10px; padding-right: 0; margin-right: 0;}
+
+/* module-tree. */
+#moduleTree.tree ul {margin-bottom: 0;}
+#menuTree > li.has-list > ul > li {padding-left: 10px;}
+#menuTree > li.has-list > ul > li.has-list {padding-left: 15px;}

module/dev/js/api.js

@@ -1,5 +1,6 @@
 $(function()
 {
+    initModule();
     setHeight();
     $(window).resize(setHeight);
 });
@@ -12,6 +13,33 @@ $(function()
  */
 function setHeight()
 {
-    var paneHeight = $(window).height() - 100;
+    var paneHeight = $(window).height() - 90;
     $('#sidebar .module-tree,#mainContent .module-content').css('height', paneHeight);
 }
+/**
+ * Init module tree by zui.
+ *
+ * @access public
+ * @return void
+ */
+function initModule()
+{
+    $('#moduleTree').tree(
+    {
+        data: moduleTree,
+        initialState: 'active',
+        itemCreator: function($li, item)
+        {
+            console.log(item);
+            $li.append('<a data-module="' + item.key + '" data-has-children="' + (item.children ? !!item.children.length : false) + '" href=# title="' + item.title + '">' + item.title + '</a>');
+            if (item.active) $li.addClass('active open in');
+        }
+    });
+
+    $('#moduleTree').on('click', 'a', function(e)
+    {
+        var target = $(e.target);
+        if (target.attr('data-has-children') === 'true') return;
+        self.location.href = createLink('dev', 'api', 'module=' + target.attr('data-module'));
+    })
+}

module/dev/js/db.js

@@ -12,6 +12,6 @@ $(function()
  */
 function setHeight()
 {
-    var paneHeight = $(window).height() - 100;
+    var paneHeight = $(window).height() - 90;
     $('#sidebar .module-tree,#mainContent .module-content').css('height', paneHeight);
 }

module/dev/model.php

@@ -1072,4 +1072,36 @@ class devModel extends model
         $menu->children = array();
         return $menu;
     }
+
+    /**
+     * Get moduleT tree.
+     *
+     * @param  string $currentModule
+     * @access public
+     * @return array
+     */
+    public function getModuleTree($currentModule)
+    {
+        $moduleTree = array();
+        $modules    = $this->getModules();
+        foreach($this->lang->dev->groupList as $moduleKey => $moduleName)
+        {
+            if(empty($modules[$moduleKey])) continue;
+            $module = new stdclass();
+            $module->key      = $moduleKey;
+            $module->title    = $moduleName;
+            $module->children = array();
+            foreach($modules[$moduleKey] as $objectKey => $objectName)
+            {
+                $object = new stdclass();
+                $object->key    = $objectKey;
+                $object->title  = zget($this->lang->dev->tableList, $objectKey, $objectKey);
+                $object->active = $objectKey == $currentModule ? 1 : 0;
+
+                $module->children[] = $object;
+            }
+            $moduleTree[] = $module;
+        }
+        return $moduleTree;
+    }
 }

module/dev/view/api.html.php

@@ -1,33 +1,11 @@
 <?php include 'header.html.php';?>
+<?php js::set('moduleTree', $moduleTree);?>
 <div id='mainContent' class='main-row'>
   <div class='side-col' id='sidebar'>
     <div class='cell module-tree'>
       <div class="panel panel-sm with-list">
         <div class='panel-heading'><i class='icon-list'></i> <strong><?php echo $lang->dev->moduleList?></strong></div>
-        <?php foreach($lang->dev->groupList as $group => $groupName):?>
-        <?php if(!empty($modules[$group])):?>
-        <div class='modulegroup'><?php echo $groupName?></div>
-        <?php foreach($modules[$group] as $module):?>
-        <?php
-        $active     = ($module == $selectedModule) ? 'text-primary' : '';
-        $moduleName = zget($lang->dev->tableList, $module, $module);
-        ?>
-        <?php echo html::a(inlink('api', "module=$module"), $moduleName, '', "class='$active'");?>
-        <?php endforeach;?>
-        <?php endif;?>
-        <?php endforeach;?>
-        <?php foreach($lang->dev->endGroupList as $group => $groupName):?>
-        <?php if(!empty($modules[$group])):?>
-        <div class='modulegroup'><?php echo $groupName?></div>
-        <?php foreach($modules[$group] as $module):?>
-        <?php
-        $active     = ($module == $selectedModule) ? 'text-primary' : '';
-        $moduleName = zget($lang->dev->tableList, $module, $module);
-        ?>
-        <?php echo html::a(inlink('api', "module=$module"), $moduleName, '', "class='$active'");?>
-        <?php endforeach;?>
-        <?php endif;?>
-        <?php endforeach;?>
+        <div id="moduleTree" class="menu-active-primary menu-hover-primary"></div>
       </div>
     </div>
   </div>