diff --git a/dsRag/static/tree.html b/dsRag/static/tree.html
index 16c4a846..741d4fc2 100644
--- a/dsRag/static/tree.html
+++ b/dsRag/static/tree.html
@@ -6,9 +6,19 @@
     <link rel="stylesheet" href="/static/zTree/css/zTreeStyle/zTreeStyle.css">
     <script src="/static/zTree/js/jquery-1.4.4.min.js"></script>
     <script src="/static/zTree/js/jquery.ztree.core.min.js"></script>
+    <script src="/static/zTree/js/jquery.ztree.exedit.min.js"></script>
+    <script src="/static/zTree/js/jquery.ztree.exhide.min.js"></script>
     <style>
         body { margin:0; padding:0; font-family:Microsoft YaHei; }
         .ztree li span { font-size:14px; }
+        .ztreeDemoBackground { margin:10px; }
+        #treeTable { width:100%; border-collapse:collapse; }
+        #treeTable th, #treeTable td { padding:8px; border:1px solid #ddd; }
+        #treeTable th { background:#f5f5f5; }
+        .level-0 td:first-child { padding-left:10px; }
+        .level-1 td:first-child { padding-left:30px; }
+        .level-2 td:first-child { padding-left:50px; }
+        .level-3 td:first-child { padding-left:70px; }
     </style>
 </head>
 <body>
@@ -16,11 +26,24 @@
     <ul id="treeDemo" class="ztree"></ul>
 </div>
 
+<div class="ztreeDemoBackground">
+    <table id="treeTable" class="ztree" border="1" cellspacing="0" cellpadding="0">
+        <thead>
+            <tr>
+                <th>知识点</th>
+                <th>先修知识</th>
+                <th>相关知识</th>
+            </tr>
+        </thead>
+        <tbody id="treeBody"></tbody>
+    </table>
+</div>
+
 <script>
 var setting = {
     view: {
         showLine: true,
-        selectedMulti: false,
+        showTitle: false,
         fontCss: function(treeId, treeNode) {
             return treeNode.isParent ? {'font-weight':'bold'} : {};
         }
@@ -35,19 +58,32 @@ var setting = {
     },
     callback: {
         onClick: function(event, treeId, treeNode) {
-            alert(treeNode.title + "\n先修知识: " + (treeNode.prerequisite || "无") + 
-                  "\n相关知识: " + (treeNode.related || "无"));
+            // 点击事件处理
         }
     }
 };
 
+function buildTreeTable(treeNodes, level) {
+    level = level || 0;
+    var html = '';
+    for (var i = 0; i < treeNodes.length; i++) {
+        html += '<tr class="level-' + level + '"><td>' + treeNodes[i].title + '</td>';
+        html += '<td>' + (treeNodes[i].prerequisite || '无') + '</td>';
+        html += '<td>' + (treeNodes[i].related || '无') + '</td></tr>';
+        if (treeNodes[i].children && treeNodes[i].children.length > 0) {
+            html += buildTreeTable(treeNodes[i].children, level + 1);
+        }
+    }
+    return html;
+}
+
 $(function(){
     $.ajax({
         url: "/api/tree-data",
         type: "GET",
         success: function(res) {
             if(res.code === 0) {
-                $.fn.zTree.init($("#treeDemo"), setting, res.data);
+                var treeObj = $.fn.zTree.init($("#treeBody"), setting, res.data);
             }
         }
     });
