jQuery树型表格jquery-treetable

jQuery-treetable是一个jQuery插件。有了这个插件，你可以在一个HTML表格中显示树，即目录结构或嵌套列表。它使你的HTML文件干净的，展现出树状表格插件，你只需要每一行数据添加特定的数据属性。该插件使用这些属性来确定你的树看起来像。
特点
它可以显示在表列中的数据树。
它可以折叠和展开想到的目录结构。
它支持无限制的树的深度。
它采用了轻量级的jQuery JavaScript的图书馆学。
使用非常简单
 

1. <link href="path/to/jquery.treetable.css" rel="stylesheet" type="text/css" /> 
2. <script src="path/to/jquery.treetable.js"></script> 
3. <script> 
4. $("#your_table_id").treetable(); 
5. </script> 

支持拖拽

 

1. $("#example-advanced").treetable({ expandable: true }); 
2.  
3. // Highlight selected row 
4. $("#example-advanced tbody tr").mousedown(function() { 
5.   $("tr.selected").removeClass("selected"); 
6.   $(this).addClass("selected"); 
7. }); 
8.  
9. // Drag & Drop Example Code 
10. $("#example-advanced .file, #example-advanced .folder").draggable({ 
11.   helper: "clone", 
12.   opacity: .75, 
13.   refreshPositions: true, 
14.   revert: "invalid", 
15.   revertDuration: 300, 
16.   scroll: true 
17. }); 
18.  
19. $("#example-advanced .folder").each(function() { 
20.   $(this).parents("tr").droppable({ 
21.     accept: ".file, .folder", 
22.     drop: function(e, ui) { 
23.       var droppedEl = ui.draggable.parents("tr"); 
24.       $("#example-advanced").treetable("move", droppedEl.data("ttId"), $(this).data("ttId")); 
25.     }, 
26.     hoverClass: "accept", 
27.     over: function(e, ui) { 
28.       var droppedEl = ui.draggable.parents("tr"); 
29.       if(this != droppedEl[0] && !$(this).is(".expanded")) { 
30.         $("#example-advanced").treetable("expandNode", $(this).data("ttId")); 
31.       } 
32.     } 
33.   }); 
34. }); 

样式自定义
默认使用的文件样式表jquery.treetable.theme.default.css的，你也可以自定义自己的风格的模板。
百度网盘下载：jQuery树型表格jquery-treetable