jQuery的树状表格插件文档
目录
1。简介
进行treetable是jQuery的一个插件,“写更少,做得更多,JavaScript库”。有了这个插件,你可以在一个表中显示树,即目录结构或嵌套列表。为什么不使用一个列表,你说什么?因为列表显示树,表都没有。哦,等等,但这个插件使用的表,不是吗?是。为什么我使用一个表来显示一个列表?因为我需要额外的数据显示,除了树多列。
由范登景气鲁,此插件在MIT许可下发布。
不可见性
我想这个插件是尽量不显得突兀。“不显眼”,是时下非常酷,所以这是一个重要的要求。但它是凉爽的一个原因:它使你的HTML文档的清洁,它可以让我的代码时很好地降低JavaScript不可用。
不幸的是,树状表格插件,您需要添加类和ID属性,每行是树的一部分。这将是巨大的,如果这是没有必要的,因为它看起来并不漂亮,在你的HTML,但该插件需要知道你的树看起来像什么。否则,将有猜测的树结构,这样做,它不会是非常成功的。如何描述一个树的更多信息,请参阅使用章。
特点
- 它可以显示在表列中的数据树。
- 为此,它会尽量不招人。
- 它可以折叠和展开想到的目录结构在大多数文件探险家分行。
- 它支持无限制的树的深度。
- 它使用的轻量级的jQuery JavaScript图书馆学。
注意:这个插件发布的名义下ActsAsTreeTable,但已被重新命名为2.0版进行treetable。
(2)安装
安装此插件是直线前进。您将需要复制多个文件,如果有必要,调整路径,从而使每一个文件的插件。
- 添加的jQuery到您的项目。这样做的说明,请参见他们的网站。你至少需要1.2.6版本。
- SRC /的Javascript角/ jquery.treeTable.js“ (或压缩后的版本)添加到您的项目。
- 添加样式表的SRC /样式表/ jquery.treeTable.css,您的项目。
- 在SRC /影像中的影像复制到您的项目。
- 在的样式表jquery.treeTable.css点,你刚才复制的图像文件,调整背景图像 S 的路径。
这就是它!现在您可以开始使用该插件在您的项目中。
(3)用法
注:本章假设您已经安装了jQuery作为他们的网站上。
3.1 在你的HTML文档中包含的插件
下面的代码粘贴在您的html文件中,下面的部分,你包括jQuery 之间的头标记。更改为红色的部分,以反映您的情况
<link href="path/to/jquery.treeTable.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="path/to/jquery.treeTable.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#your_table_id").treeTable(); }); </script>
3.2 代表你在一个表中的树
当你贴在上面的代码和调整,以反映您的情况,使显示表中的树的可能性。为了使实际显示的树树,你必须添加到您的表行(TR)ID和类属性。
如何做到这一点?
首先,你应该添加一个独特的 ID,每个表中的数据,例如节点x “。然后添加一个类的属性给每个孩子一个节点,这个类的名称“ 孩子的节点-X “。的节点-X部分作为其母公司的ID应该是相同的。你还跟着我?让我告诉你一个非常简单的树的一个例子:一个孩子的单亲。更多的例子,你应该查看这个页面的源代码,在那里你找到几个表的实例“一章中的例子。
<table id="tree">
<tr id="node-1">
<td>Parent</td>
</tr>
<tr id="node-2" class="child-of-node-1">
<td>Child</td>
</tr>
<tr id="node-3" class="child-of-node-2">
<td>Child</td>
</tr>
</table>
请注意,该插件希望以相同的顺序,他们应在树中显示的HTML表中的行。例如,假设您有三个节点:A,B(孩子的一个节点),C(子节点B)。如果您创建这些节点在你的HTML表中的行按以下顺序一个 - C - B,树不会正确显示。你必须确保该行的顺序A - B - C
3.3 配置
有几个设置,让您调整行为的插件。本节中描述的每个设置。如何更改这些设置的示例,请参见例3。
设置 | 类型 | 默认 | 描述 |
---|---|---|---|
childPrefix | 串 | “孩子” | 自定义用于节点类的前缀。 |
clickableNodeNames | BOOL | 假 | 不仅扩大分支机构扩展点击图标时,也节点名被点击时,设置为true。 |
扩展 | BOOL | 真 | 如果树是扩展?一个可扩展的树中包含的按钮,使每个儿童可折叠/展开的分支。 |
缩进 | INT | 19 | 每个分支机构应当缩进的像素数。 |
初始化状态 | 串 | “倒塌” | 可能的值:“扩展”或“崩溃”。 |
onNodeShow | 功能 | 空 | 发射回调函数,当一个节点是可见的。 |
坚持 | BOOL | 假 | 坚持树的状态在客户端(需要persist.js)。 |
persistStoreName | 串 | “进行treetable” | 使用的店铺名称时,坚持是正确的。 |
treeColumn | INT | 0 | 应显示为一棵树的表,该表中的列的数目。 |
3.4 功能(公共API)
功能 | 描述 |
---|---|
appendBranchTo(目标) | 一个完整的分支目的地。有用的拖放和拖放行为。 |
崩溃 | 递归地隐藏在树上的所有节点的子节点。 |
扩大 | 所有节点的子节点递归地显示在一棵树上。 |
揭示 | 揭示了扩大所有祖先节点。 |
toggleBranch | 切换的整个分支。 |
4。实例
本章中的示例使用的的进行treetable插件显示表中的一棵树,可折叠的分支。查看这个文件的源代码,看看它是如何做读的用法“一章的进一步详情。
4.1 一个复杂的树
节点1 |
节点1.1 |
节点1.2 |
节点1.3 |
节点2 |
节点2.1 |
节点2.2 |
4.2 不可折叠的树,
$("#example3").treeTable({ expandable: false });
树列 | 第2栏 |
---|---|
节点1 | 第二列 |
节点1.1 | 第二列 |
节点1.2 | 第二列 |
节点1.3 | 第二列 |
节点2 | 第二列 |
节点2.1 | 第二列 |
节点2.1.1 | 第二列 |
节点2.2 | 第二列 |
节点2.2.1 | 第二列 |
节点2.2.2 | 第二列 |
4.
这个例子使用jQuery的UI组件创建一棵树,可以被操纵的节点拖放draggable和droppable。您可以拖动节点,通过点击它的标题,并将其拖动到不同的位置。这种行为需要更多的编码,而不是简单的树上面,但它仍然是相当直接的。在这个例子中的代码列在下面。在这段代码中最有趣的线,从插件的角度来看是$($(ui.draggable)。父母(“TR”))。appendBranchTo(本);。这里的appendBranchTo的函数被调用到一个新的位置移动选定的分支。
例3:拖放例子。
标题 | 大小 | 样 |
---|---|---|
CHANGELOG | 4 KB | “纯文本” |
DOC | - | 夹 |
MIT许可证 | 4 KB | “纯文本” |
README.markdown | 4 KB | 降价文件 |
SRC | - | 夹 |
/* NOTE: Do not forget to download the jQuery UI Draggable and Droppable * components if you want to enable dragging and dropping behavior! */ // Configure draggable nodes $("#dnd-example .file, #dnd-example .folder").draggable({ helper: "clone", opacity: .75, refreshPositions: true, // Performance? revert: "invalid", revertDuration: 300, scroll: true }); $("#dnd-example .folder").each(function() { $($(this).parents("tr")[0]).droppable({ accept: ".file, .folder", drop: function(e, ui) { $($(ui.draggable).parents("tr")[0]).appendBranchTo(this); }, hoverClass: "accept", over: function(e, ui) { if(this.id != $(ui.draggable.parents("tr")[0]).id && !$(this).is(".expanded")) { $(this).expand(); } } }); }); // Make visible that a row is clicked $("table#dnd-example tbody tr").mousedown(function() { $("tr.selected").removeClass("selected"); // Deselect currently selected rows $(this).addClass("selected"); }); // Make sure row is selected when span is clicked $("table#dnd-example tbody tr span").mousedown(function() { $($(this).parents("tr")[0]).trigger("mousedown"); });