jQuery的树状表格插件文档

 

jQuery的树状表格插件文档

 

目录

1. 介绍
2. 安装
3. 用法
   1. 在您的HTML文件中包含的插件
   2. 代表你的表中的树
   3. 组态
   4. 功能（公共API）
4. 实例
   1. 一个复杂的树
   2. 不可折叠的树，
   3. 拖放例如
   4. 一个大的，复杂的表拖放

 

1。简介

进行treetable是jQuery的一个插件，“写更少，做得更多，JavaScript库”。有了这个插件，你可以在一个表中显示树，即目录结构或嵌套列表。为什么不使用一个列表，你说什么？因为列表显示树，表都没有。哦，等等，但这个插件使用的表，不是吗？是。为什么我使用一个表来显示一个列表？因为我需要额外的数据显示，除了树多列。

由范登景气鲁，此插件在MIT许可下发布。

不可见性

我想这个插件是尽量不显得突兀。“不显眼”，是时下非常酷，所以这是一个重要的要求。但它是凉爽的一个原因：它使你的HTML文档的清洁，它可以让我的代码时很好地降低JavaScript不可用。

不幸的是，树状表格插件，您需要添加类和ID属性，每行是树的一部分。这将是巨大的，如果这是没有必要的，因为它看起来并不漂亮，在你的HTML，但该插件需要知道你的树看起来像什么。否则，将有猜测的树结构，这样做，它不会是非常成功的。如何描述一个树的更多信息，请参阅使用章。

特点

• 它可以显示在表列中的数据树。
• 为此，它会尽量不招人。
• 它可以折叠和展开想到的目录结构在大多数文件探险家分行。
• 它支持无限制的树的深度。
• 它使用的轻量级的jQuery JavaScript图书馆学。

注意：这个插件发布的名义下ActsAsTreeTable，但已被重新命名为2.0版进行treetable。

（2）安装

安装此插件是直线前进。您将需要复制多个文件，如果有必要，调整路径，从而使每一个文件的插件。

1. 添加的jQuery到您的项目。这样做的说明，请参见他们的网站。你至少需要1.2.6版本。
2. SRC /的​​Javascript角/ jquery.treeTable.js“ （或压缩后的版本）添加到您的项目。
3. 添加样式表的SRC /样式表/ jquery.treeTable.css，您的项目。
4. 在SRC /影像中的影像复制到您的项目。
5. 在的样式表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

节点1.2

节点1.3

节点2

节点2.1

节点2.2

 

 

 

4.2 不可折叠的树，

 

$("#example3").treeTable({
  expandable: false
});

 

 

例2：一个是不可折叠的树。

树列	第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");
});