diff --git a/module/dept/control.php b/module/dept/control.php
index c40e892f27..7ade562193 100644
--- a/module/dept/control.php
+++ b/module/dept/control.php
@@ -41,6 +41,7 @@ class dept extends control
         $this->view->depts       = $this->dept->getTreeMenu($rootDeptID = 0, array('deptmodel', 'createManageLink'));
         $this->view->parentDepts = $parentDepts;
         $this->view->sons        = $this->dept->getSons($deptID);
+        $this->view->tree        = $this->dept->getFullTree(0);
         $this->display();
     }
 
diff --git a/module/dept/css/browse.css b/module/dept/css/browse.css
index 8bd5357e69..454ff34df7 100644
--- a/module/dept/css/browse.css
+++ b/module/dept/css/browse.css
@@ -1,4 +1,11 @@
 .table.table-form {width: auto;}
 .table-form > tbody > tr > td .form-control + .form-control {margin-top: 5px;}
 
-.tree-lines li.has-list.open > ul:after {bottom: 20px;}
+.tree li.has-list > .tree-actions > .tree-action[data-type="delete"] {display: none}
+.tree .dept-name {font-weight: 500}
+.tree-toggle {cursor: pointer;}
+.tree li:hover > .tree-actions {opacity: 0}
+.tree li.hover > .tree-actions {opacity: 1}
+
+#addChildModal form > .form-control {margin-bottom: 8px;}
+#addChildModal .modal-dialog {max-width: 360px;}
diff --git a/module/dept/lang/en.php b/module/dept/lang/en.php
index da6d13cf95..c4cdee47d2 100644
--- a/module/dept/lang/en.php
+++ b/module/dept/lang/en.php
@@ -10,7 +10,7 @@
  * @link        http://www.zentao.net
  */
 $lang->dept->common      = 'Department';
-$lang->dept->manageChild = "Child deprtment";
+$lang->dept->manageChild = "Child department";
 $lang->dept->edit        = "Edit";
 $lang->dept->delete      = "Delete";
 $lang->dept->parent      = "Parent";
@@ -19,6 +19,8 @@ $lang->dept->name        = "Name";
 $lang->dept->browse      = "Manage";
 $lang->dept->manage      = "Manage";
 $lang->dept->updateOrder = "Update order";
+$lang->dept->add         = "Add department";
+$lang->dept->dragAndSort = "Drag and sort";
 
 $lang->dept->confirmDelete = "Are you sure to delete this department?"; 
 $lang->dept->successSave   = "Success save.";
diff --git a/module/dept/lang/zh-cn.php b/module/dept/lang/zh-cn.php
index abb3a9751d..baaf22f613 100644
--- a/module/dept/lang/zh-cn.php
+++ b/module/dept/lang/zh-cn.php
@@ -19,6 +19,8 @@ $lang->dept->name        = "部门名称";
 $lang->dept->browse      = "部门维护";
 $lang->dept->manage      = "维护部门结构";
 $lang->dept->updateOrder = "更新排序";
+$lang->dept->add         = "添加部门";
+$lang->dept->dragAndSort = "拖动排序";
 
 $lang->dept->confirmDelete = " 您确定删除该部门吗？";
 $lang->dept->successSave   = " 修改成功。";
diff --git a/module/dept/model.php b/module/dept/model.php
index d746f82ba7..212fedbc27 100644
--- a/module/dept/model.php
+++ b/module/dept/model.php
@@ -445,4 +445,24 @@ class deptModel extends model
             $this->dao->update(TABLE_DEPT)->data($dept)->where('id')->eq($dept->id)->exec();
         }
     }
+
+    public function getFullTree($rootDeptID = 0) 
+    {
+        $tree = array_values($this->getSons($rootDeptID));
+        $users = $this->loadModel('user')->getPairs('nodeleted|noletter|noclosed');
+        if(count($tree))
+        {
+            foreach ($tree as $node)
+            {
+                $node->managerName = $users[$node->manager];
+                $children = $this->getFullTree($node->id);
+                if(count($children))
+                {
+                    $node->children = $children;
+                    $node->actions = array('delete' => false);
+                }
+            }
+        }
+        return $tree; 
+    }
 }
diff --git a/module/dept/view/browse.html.php b/module/dept/view/browse.html.php
index fec2c75b9a..b2c3dee661 100644
--- a/module/dept/view/browse.html.php
+++ b/module/dept/view/browse.html.php
@@ -15,68 +15,132 @@
   <div class='heading'><?php echo html::icon($lang->icons['dept']);?> <?php echo $lang->dept->common;?></div>
 </div>
 <div class='main'>
-  <div class='row'>
-    <div class='col-sm-4'>
-      <div class='panel panel-sm'>
-        <div class='panel-heading'>
-          <?php echo html::icon($lang->icons['dept']);?> <strong><?php echo $title;?></strong>
-        </div>
-        <div class='panel-body'>
-          <form method='post' target='hiddenwin' action='<?php echo $this->createLink('dept', 'updateOrder');?>'>
-            <div id='main'><?php echo $depts;?></div>
-            <div class='text-center'><?php echo html::submitButton($lang->dept->updateOrder);?></div>
-          </form>
-        </div>
-      </div>
+  <div class='panel'>
+    <div class='panel-heading'>
+      <?php echo html::icon($lang->icons['dept']);?> <strong><?php echo $title;?></strong>
     </div>
-    <div class='col-sm-8'>
-      <div class='panel panel-sm'>
-        <div class='panel-heading'>
-          <i class='icon-sitemap'></i> <strong><?php echo $lang->dept->manageChild;?></strong>
-        </div>
-        <div class='panel-body'>
-          <form method='post' target='hiddenwin' action='<?php echo $this->createLink('dept', 'manageChild');?>' class='form-condensed'>
-            <table class='table table-form'>
-              <tr>
-                <td>
-                  <nobr>
-                  <?php
-                  echo html::a($this->createLink('dept', 'browse'), $this->app->company->name);
-                  echo $lang->arrow;
-                  foreach($parentDepts as $dept)
-                  {
-                      echo html::a($this->createLink('dept', 'browse', "deptID=$dept->id"), $dept->name);
-                      echo $lang->arrow;
-                  }
-                  ?>
-                  </nobr>
-                </td>
-                <td class='w-300px'> 
-                  <?php
-                  $maxOrder = 0;
-                  foreach($sons as $sonDept)
-                  {
-                      if($sonDept->order > $maxOrder) $maxOrder = $sonDept->order;
-                      echo html::input("depts[id$sonDept->id]", $sonDept->name, "class='form-control'");
-                  }
-                  for($i = 0; $i < DEPT::NEW_CHILD_COUNT ; $i ++) echo html::input("depts[]", '', "class='form-control'");
-                 ?>
-                </td>
-                <td></td>
-              </tr>
-              <tr>
-                <td></td>
-                <td>
-                  <?php echo html::submitButton() . html::backButton() . html::hidden('maxOrder', $maxOrder);?>
-                  <input type='hidden' value='<?php echo $deptID;?>' name='parentDeptID' />
-                </td>
-              </tr>
-            </table>
-          </form>
-        </div>
+    <div class='panel-body'>
+      <div class='container'>
+        <ul class='tree-lines' id='deptTree'></ul>
       </div>
-
     </div>
   </div>
 </div>
+<div class='modal fade' id='addChildModal'>
+  <div class='modal-dialog'>
+    <div class='modal-content'>
+      <div class='modal-header'>
+        <button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>×</span></button>
+        <h4 class='modal-title'><span class='dept-name'></span> <i class="icon icon-angle-right"></i> <?php echo $lang->dept->add;?></h4>
+      </div>
+      <div class='modal-body'>
+        <form method='post' target='hiddenwin' action='<?php echo $this->createLink('dept', 'manageChild');?>' class='form-condensed'>
+          <?php
+            for($i = 0; $i < DEPT::NEW_CHILD_COUNT ; $i ++) echo html::input("depts[]", '', "class='form-control'");
+          ?>
+          <div class='text-center'>
+            <?php echo html::submitButton() . html::commonButton($lang->close, 'data-dismiss="modal"', 'btn')?>
+            <input type='hidden' value='0' name='parentDeptID' />
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+$(function()
+{
+    var data = $.parseJSON('<?php echo json_encode($tree);?>');
+    var $tree = $('#deptTree').tree(
+    {
+        initialState: 'preserve',
+        data: data,
+        itemCreator: function($li, item)
+        {
+            var $toggle = $('<span class="tree-toggle"><span class="dept-name">' + item.name + '</span></span>');
+            if(item.manager)
+            {
+                $toggle.append('&nbsp; <span class="dept-manager text-muted"><i class="icon icon-user"></i> ' + item.managerName + '</span>');
+            }
+            $li.append($toggle);
+            return true;
+        },
+        actions: 
+        {
+            sort:
+            {
+                title: '<?php echo $lang->dept->dragAndSort ?>',
+                template: '<a class="sort-handler" data-toggle="tooltip" href="javascript:;"><i class="icon icon-move"></i>'
+            },
+            edit:
+            {
+                linkTemplate: '<?php echo helper::createLink('dept', 'edit', "deptid={0}"); ?>',
+                title: '<?php echo $lang->dept->edit ?>',
+                template: '<a data-toggle="tooltip" href="javascript:;"><i class="icon icon-pencil"></i>'
+            },
+            add:
+            {
+                title: '<?php echo $lang->dept->add ?>',
+                template: '<a data-toggle="tooltip" href="javascript:;"><i class="icon icon-plus"></i>',
+                templateInList: '<a href="javascript:;"><i class="icon icon-plus"></i> <?php echo $lang->dept->add ?></a>'
+            },
+            "delete":
+            {
+                linkTemplate: '<?php echo helper::createLink('dept', 'delete', "deptid={0}"); ?>',
+                title: '<?php echo $lang->dept->delete ?>',
+                template: '<a data-toggle="tooltip" href="javascript:;"><i class="icon icon-trash"></i>'
+            }
+        },
+        action: function(event)
+        {
+            var action = event.action, $target = $(event.target), item = event.item;
+            if(action.type === 'edit')
+            {
+                $target.modalTrigger(
+                {
+                    type: 'ajax',
+                    url: action.linkTemplate.format(item.id)
+                }).trigger('click');
+            }
+            else if(action.type === 'delete')
+            {
+                window.open(action.linkTemplate.format(item.id), 'hiddenwin');
+            }
+            else if(action.type === 'add')
+            {
+                var $modal = $('#addChildModal');
+                $modal.find('input[name="parentDeptID"]').val(item.id);
+                $modal.find('.dept-name').text(item.name);
+                $modal.modal('show');
+            }
+            else if(action.type === 'sort')
+            {
+                var orders = {};
+                $('#deptTree').find('li:not(.tree-action-item)').each(function()
+                {
+                    var $li = $(this);
+                    var item = $li.data();
+                    orders['orders[' + item.id + ']'] = $li.attr('data-order') || item.order;
+                });
+                $.post('<?php echo $this->createLink('dept', 'updateOrder') ?>', orders).error(function()
+                {
+                    bootbox.alert(lang.timeout);
+                });
+            }
+        }
+    });
+
+    var tree = $tree.data('zui.tree');
+    if(!tree.store.time) tree.expand($tree.find('li:not(.tree-action-item)').first());
+
+    $tree.on('mouseenter', 'li:not(.tree-action-item)', function(e)
+    {
+        $('#deptTree').find('li.hover').removeClass('hover');
+        $(this).addClass('hover');
+        e.stopPropagation();
+    });
+
+    $tree.find('[data-toggle="tooltip"]').tooltip();
+});
+</script>
 <?php include '../../common/view/footer.html.php';?>