jQuery树型表格jquery-treetable

jQuery-treetable是一个jQuery插件。有了这个插件，你可以在一个HTML表格中显示树，即目录结构或嵌套列表。它使你的HTML文件干净的，展现出树状表格插件，你只需要每一行数据添加特定的数据属性。该插件使用这些属性来确定你的树看起来像。

特点

它可以显示在表列中的数据树。

它可以折叠和展开想到的目录结构。

它支持无限制的树的深度。

它采用了轻量级的jQuery JavaScript的图书馆学。

使用非常简单

<link href="path/to/jquery.treetable.css" rel="stylesheet" type="text/css" />

<script src="path/to/jquery.treetable.js"></script>

<script>

$("#your_table_id").treetable();

</script>

支持拖拽

$("#example-advanced").treetable({ expandable: true });

// Highlight selected row

$("#example-advanced tbody tr").mousedown(function() {

$("tr.selected").removeClass("selected");

$(this).addClass("selected");

});

// Drag & Drop Example Code

$("#example-advanced .file, #example-advanced .folder").draggable({

helper: "clone",

opacity: .75,

refreshPositions: true,

revert: "invalid",

revertDuration: 300,

scroll: true

});

$("#example-advanced .folder").each(function() {

$(this).parents("tr").droppable({

accept: ".file, .folder",

drop: function(e, ui) {

var droppedEl = ui.draggable.parents("tr");

$("#example-advanced").treetable("move",
droppedEl.data("ttId"), $(this).data("ttId"));

},

hoverClass: "accept",

over: function(e, ui) {

var droppedEl = ui.draggable.parents("tr");

if(this != droppedEl[0] && !$(this).is(".expanded")) {

$("#example-advanced").treetable("expandNode", $(this).data("ttId"));

}

}

});

});

样式自定义

默认使用的文件样式表jquery.treetable.theme.default.css的，你也可以自定义自己的风格的模板。