主页

花椰树简介。

注：
花椰树被认为是功能完备的。代码仍然保持不变将提交错误修复。然而，不要指望有新的主要功能。
看看旺德鲍姆培养箱作为潜在的接班人。

主要特点

一些亮点：

丰富的面向对象API
具有AMD支持的可扩展模块化设计
大数据集的延迟加载和高效高效的处理
支持视口，即在维护大数据模型.
全功能表视图支持（又名树状网格）
键盘导航
符合WAI-ARIA
（分层）选择和复选框
拖放（基于html5或jQuery UI）
行内编辑
搜索和筛选
扩展、选择和活动状态的持久性
主题表（附带WinXP、Win7、Win8、OS X Lion和Glyph示例）
树的行为类似于单个表单控件，即它是“tabable”
等等。。。看见可用扩展列表

尝试演示

看看浏览器示例播放现场演示。单击查看源代码每个页面底部的链接以查看内容继续。

理解核心概念

这是不对于标准用例是必需的，但您可能想回来阅读有关主要概念后来。

入门

有几种方法可以获得最新的稳定Fancytree版本：

使用您最喜欢的包管理器，例如：
净现值法:$npm安装--保存jquery.fancytree,
纱线:$yarn添加jquery.fancytree，或
凉亭:$bower安装fancytree
将把最新的稳定版本下载到您的项目文件夹中。
使用内容交付网络来源，例如：jsDeliver公司,cdnjs公司，或解开.
从中打开发布发布列表并通过单击下载包含文档、测试等的完整源代码树源代码（zip）.您将在距离/文件夹。

访问开发源

有许多不同的选项可以访问最新的不稳定的开发快照：

从GitHub结账（如果您想结账，建议使用贡献).
传递a特殊URL到npm，例如：
$npm安装github:mar10/fancytree.
直接包含自jsDeliver CDN.
点击下载ZIP在项目页面.

请注意距离/文件夹仍然包含最新的释放版本。你必须跑步npm安装和咕哝make_dist本地创建当前缩小中的文件距离/文件夹。
请参见如何贡献有关如何安装Fancytree进行调试和贡献。

项目结构

目前我们提供此目录结构（仅显示最重要的文件）：

jquery.fancytree公司/⑪——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————演示/示例浏览器├─ src/当前开发代码（“正确构建”）├─ 测试/单元测试和分类└─ dist/最新发布版本：├─ modules/支持AMD的所有单个模块|  ├─ jquery.fancytree.js核心模块。这也是你得到的|| `需要（'jquery.fancytree'）`|  ├─ jquery.fancytree。外景.js。。。扩展模块|  └─ jquery.fancytree.ui-deps.js隐式加载的依赖项├─ 皮肤-NAME/LESS和CSS样式以及NAME主题的图像|  ├─ 图标.gif。。。图标精灵|  ├─ ui.fancytree.css编译的css|  ⑪—ui.fancytree.min.css小型css|  └─ ui.fancytree.less less定义（包括../skin-common）⑪—skin-custom-1/自定义主题的起点├─ jquery.fancytree.min.js核心库（无扩展），缩小├─ 带有核心和大多数扩展的jquery.fancytree-all[.min].js包。│                                         AMD包装器引用ui-widgets。│                                         仅当您计划在生产中使用此选项│                                         单独包含jQuery UI。├─ jquery.fancytree-all-deps[.min].js包，包含核心、大多数扩展和│                                         所需的jQuery UI小部件。│                                         这是推荐的源文件|生产（除非使用模块加载器）。└─ skin-common.less共享样式，由股票主题使用

需求和依赖性

Fancytree需要jQuery公司1.9+（建议使用3.x标准版本）作为外部依赖。
注：如果使用了包管理器或模块加载器，jQuery将自动包含在Fancytree核心模块。
注：这并不意味着你真的需要使用项目中的jQuery。
Fancytree内部也使用了一些jQuery用户界面小部件。
然而，这些都是分布的透明部分(jquery.fancytree-all-deps.min.js公司)，或者如果使用了模块加载器。
注：jQuery UI主题是不必修的。
或者，如果您的项目已经包含jQuery UI（建议使用1.12以上版本）无论如何，使用jquery.fancytree-all.min.js公司而不是jquery.fancytree-all-deps.min.js公司.
如果自定义下载使用，至少应选择以下组件：
“UI核心”，
“效果”：“效果核心”，“盲目效果”
这个ext-dnd（扩展）扩展还需要“Interactions”：“Dragable”、“Dropable”、，然而分机-dnd5扩展没有此依赖项。

在网页上嵌入Fancytree

一个简单的例子：

<头>[…]<!-- 包括jQuery-->
  <脚本 型钢混凝土="资产/jquery/dist/jquery最小.js"></脚本>
  <!-- 包括Fancytree皮肤和库-->
  <链接 href公司="资产/jquery.fancytree/dist/skin-win8/ui.fancystree.min.css"相对="样式表">
  <脚本 型钢混凝土="资产/jquery.fancytree/dist/jquery。fancyttree-all-deps.min.js"></脚本>
  <!-- 加载页面时初始化树-->
  <脚本 类型="文本/javascript">
    $(功能(){  //页面加载时
      //在<div id=“tree”>元素中创建树。
      $(“#树”).奇树({
        扩展:[“编辑”, “过滤器”],
        来源:{...},...});
      //注意：加载和初始化可能是异步的，因此节点可能还无法访问。
    });
  </脚本>
</头>
<身体>[…]<!-- 定义树的targel元素-->
  <分区 身份证件="树"></分区>[…]</身体>
</html格式>

或直接从CDN来源包括：

<脚本 型钢混凝土="//code.jquery.com/jquery-3.6.0.min.js"></脚本>
<链接 href公司="//cdn.jsdeliver.net/npm/jquery.fancytree@2.27查询/dist/skin-win8/ui.fancytree.min.css"相对="样式表">
<脚本 型钢混凝土="//cdn.jsdeliver.net/npm/jquery.fancytree@2.27/dist/jquery.fancytree-all-deps.min.js"></脚本>

另请参见集成指南了解详细信息。

使用模块加载器

注：v2.25+版本可用。

使用模块捆绑程序时网络包，我们可以添加Fancytree

$npm安装--保存jquery.fancytree

然后使用要求（）或进口。示例：

//导入LESS或CSS：
进口 'jquery.fancytree/dist/skin-lion/ui.fancystree.less'

常数 $ = 要求(“jquery”);

常数 奇树 = 要求(“jquery.fancytree”);
要求('jquery.fancytree/dist/modules/jquery.ancytree.edit');
要求('jquery.fancytree/dist/modules/jquery.ancytree.filter');

慰问.日志(奇树.版本);

$(功能(){
  $(“#tree”).奇树({
    扩展:['编辑', '筛选器'],
    来源:{...},...});
  常数 树 = 奇树.获取树(“#tree”);
  //注意：加载和初始化可能是异步的，因此节点可能还无法访问。
})

这个要求（）调用返回$.ui.fancytree（美元）对象，这会带来一些帮助静态属性和方法，如.版本,.createTree（）,.eventToString（）,
.getNode（）,.getTree（）等。(查看API文档以了解详细信息).

如果我们想避免$，我们也可以不使用：

进口 'jquery.fancytree/dist/skin-lion/ui.fancystree.less';  //CSS或更少
进口 {创建树} 从 'jquery.fancytree';
进口 'jquery.fancytree/dist/modules/jquery.ancytree.edit';
进口 'jquery.fancytree/dist/modules/jquery.ancytree.filter';

常数 树 = 创建树(“#tree”, {
  扩展:['编辑', '筛选器'],
  来源:{...},...});
//注意：加载和初始化可能是异步的，因此节点可能还无法访问。

另请参见集成指南有关Angular、webpack、require.js等的详细信息和配置提示。

定义树数据

有几种方法可以定义实际的节点结构：

使用来源传递数据结构，即嵌套对象数组的选项：

$(“#树”).奇树({
  来源:[
    {标题:“节点1”, 钥匙:"1"},
    {标题:“文件夹2”, 钥匙:“2”, 文件夹:真的, 儿童:[
      {标题:“节点2.1”, 钥匙:“3”},
      {标题:“节点2.2”, 钥匙:"4"}
    ]}
  ],...

另请参见数据属性的完整列表.

使用来源选项通过Ajax加载数据。

$(“#树”).奇树({
  来源:{
    网址:“/getTreeData”,
    隐藏物:假
  },...

预计Ajax服务将返回有效的JSON数据：

[{“标题”:"节点1",“密钥”:"1"},{“标题”:"文件夹2",“密钥”:"2",“文件夹”:真的,“儿童”: [{“标题”:"节点2.1",“密钥”:"三"},{“标题”:"节点2.2",“密钥”:"4"}]}]

定义一个＜ul＞/＜li＞树中的标记结构<div>标签。（注意方法1。和2。首选。）

$(“#树”).奇树();

HTML格式：

<分区 身份证件="树">
  <ul公司 身份证件="树数据"风格="显示：无；">
    <锂 身份证件="1">节点1<锂 身份证件="2"班="文件夹">文件夹2<ul公司>
        <锂 身份证件="三">节点2.1<锂 身份证件="4">节点2.2</ul公司>
  </ul公司>
</分区>...

有关更多信息，另请参阅教程加载数据和在线演示.

惰性加载

Fancytree支持加载节点按需提供，即仅当节点处于第一次扩大。

为了启用此功能，我们可以将节点标记为懒惰的.

  $(“#树”).奇树({
    //在某些叶节点上设置“惰性”标志的初始节点数据
    来源:[
      {标题:“儿童1”, 钥匙:"1", 懒惰的:真的},
      {标题:“文件夹2”, 钥匙:“2”, 文件夹:真的, 懒惰的:真的}
    ],
    lazyLoad（惰性加载）:功能(事件, 数据) {
      无功功率，无功功率 节点 = 数据.节点;
      //发出Ajax请求以加载子节点
      数据.结果 = {
        网址:“/getBranchData”,
        数据:{钥匙:节点.钥匙}
      }
    }
  });

有关更多信息，请参阅教程加载数据.

配置选项

初始化过程中会将其他选项传递给Fancytree：

$(“#树”).奇树({
  来源:{
    网址:“ajax-tree-plain.json”
  },
  复选框:真的,
  [...]
});

也可以设置选项之后使用以下语法进行初始化：

无功功率，无功功率 树 = $.用户界面.奇树.获取树(“#树”);

树.setOption（设置选项）(“复选框”, 真的);
//替代jQuery样式：
//$（“#tree”）.fancytree（“option”，“checkbox”，true）；

有关更多信息，另请参阅完整的可用选项列表和选项配置器.

动态选项

可以使用动态模式以灵活的方式定义某些节点选项。

例如，考虑复选框选项，可以是true、false或“收音机”。如果省略，它将默认为false。可以这样配置所有节点的全局启用复选框：

$(“#树”).奇树({
  复选框:真的,
  来源:{网址:“/mySource”},...

此全局设置可能会被每个节点的具体源数据覆盖，如果存在同名属性：

[{“标题”:"节点1"},{“标题”:"节点2",“复选框”:假},{“标题”:"节点3",“复选框”:"收音机"}]

如果全局设置是回调，则将为每个节点调用它，因此允许动态定义选项值：

$(“#树”).奇树({
  复选框:功能(事件, 数据) {
    //隐藏文件夹的复选框
    返回 数据.节点.is文件夹()?假:真的;
  },
  工具提示:功能(事件, 数据) {
    //创建动态工具提示
    返回 数据.节点.标题 + " (" + 数据.节点.钥匙 + ")";
  },
  偶像:功能(事件, 数据) {
    无功功率，无功功率 节点 = 数据.节点;
    //创建自定义图标
    如果( 节点.数据.参考类型 === “foo” ) {
      返回 “foo-icon-class”;
    }
    //退出而不返回值：继续默认处理。
  },...

目前，以下选项被评估为动态选项：复选框,偶像,图标工具提示,工具提示,不可选择的,不可选择忽略,不可选择状态.

事件处理

可以通过定义事件处理程序（即。回调函数）。

每个事件处理程序都传递一个数据参数，它包含有关事件目标。

  $(“#树”).奇树({...激活:功能(事件, 数据){
      //节点已激活：显示其标题：
      无功功率，无功功率 节点 = 数据.节点;
      $(“#echoActive”).文本(节点.标题)
    },
    before选择:功能(事件, 数据){
      //即将选择一个节点：对于文件夹节点，请防止发生这种情况：
      如果( 数据.节点.是文件夹() ){
        返回 假;
      }
    }
  });

定义事件处理程序的另一种方法是稍后将它们绑定到已初始化树。请注意，事件名称必须转换为小写，并且前缀为“fancytree”：

  $(“#树”).在(“fantytreebeforelect”, 功能(事件, 数据){
    如果( 数据.节点.是文件夹() ){
      返回 假;
    }
  });

有关更多信息，另请参阅教程活动,这个在线演示,完整的可用事件列表,和a“data”对象的描述.

API访问

Fancytree公开了一个用于查询和操作的面向对象的扩展接口数据模型：

  无功功率，无功功率 树 = $.用户界面.扇形三角形.获取树(“#树”),
      活动节点 = 树.获取活动节点();

  //对活动节点的子节点进行排序：
  活动节点.排序子项();
  //展开所有树节点
  树.参观(功能(节点){
    节点.集合已展开(真的);
  });
  //附加新的子节点
  活动节点.添加子项({
    标题:“使用自定义图标的文档”,
    偶像:“customdoc1.gif”
  });

有关更多信息，请参阅教程Api.

选择和复选框

Fancytree支持三种模式：

选择模式：1：单选
任何时候都只选择一个节点。
选择模式：2：多选（默认）
每个节点都可以独立选择。
选择模式：3：分层选择
（取消）选择节点将传播到所有后代。混合状态将是显示为部分选定使用三态复选框。

而挑选出来的节点的状态与复选框图标无关，我们将通常使用复选框：true选项。（特殊值“收音机”将复选框转换为单选按钮。）

可以使用控制选择模式3中的传播不可选择的,未选中状态,和不可选择忽略选项。
节点选项单项选择为其子节点启用单选。

请参阅在线演示和细节.

树状网格

一个主要功能是Fancytree能够将树渲染为表（也称为树网格）并支持在带有嵌入式输入控件的网格中进行键盘导航。

这是作为可扩展的扩展。

支持主题

一些皮肤是发行版的一部分（Win XP、Windows 7、Windows 8、OS X Lion等）。使用皮肤上的组合框在线演示,尝试一下。

更多信息在这里.

扩展

Fancytree可以使用扩展扩展.标准发行版已经以这种方式包含了一些额外的功能，如表支持、内联编辑、过滤等。

阅读更多关于

索引

辅导的
- 概述
- 主要概念
- 加载数据
- 事件处理
- 编程API
- 使用扩展名
- 支持主题
- 类型
- 集成
- 贡献
- 迁移信息
- 画廊
- 常见问题解答
扩展
副本请求
许可证
API参考^
在线演示^
项目主页^
jsFiddle公司^
Plunker公司^

提供反馈

保存的搜索

使用保存的搜索更快地筛选结果

主页