大家好，又见面了，我是你们的朋友全栈君。
插件描述：jQuery-treetable是一个jQuery插件。有了这个插件，你可以在一个HTML表格中显示树，即目录结构或嵌套列表。它使你的HTML文件干净的，展现出树状表格插件，你只需要每一行数据添加特定的数据属性。
jQuery-treetable
有了这个插件，你可以在一个HTML表格中显示树，即目录结构或嵌套列表。它使你的HTML文件干净的，展现出树状表格插件，你只需要每一行数据添加特定的数据属性。该插件使用这些属性来确定你的树看起来像。 特点 它可以显示在表列中的数据树。 它可以折叠和展开想到的目录结构。 它支持无限制树的深度。
使用方法
引用所需要的文件
初始化插件
$(“#your_table_id”).treetable();
支持拖拽$(“#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的，你也可以自定义自己的风格的模板。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/134742.html原文链接：https://javaforall.net
