教程集成

本文档描述了如何在不同的堆栈、环境和场景。

注：有很多不同的用例。如果有问题，请提供反馈失踪或不适合你。

指南：

偏爱├─ 1.通过`<script>`标签包括：|  ├─ 1.1. 从资产中包括：|  |  ├─ 在项目中使用jQuery UI：|  |  |    => 1.1.1.|  |  └─ 在项目中不使用jQuery UI：|  |       => 1.1.2.|  └─ 1.2. 使用CDN：|     ├─ 在项目中使用jQuery UI：|     |    => 1.2.1.|     └─ 在项目中不使用jQuery UI：|          => 1.2.2.├─ 2.使用AMD，require.js。。。（`require（）`）：|  ├─ 在项目中使用jQuery UI：|  |    => 2.1.|  ⑪—在项目中不使用jQuery UI：|       => 2.2.⑪—3.使用ES6、Babel、模块装载机（`import`、`require`）：├─ 在项目中使用jQuery UI：|    => 3.1.└─ 在项目中不使用jQuery UI：=> 3.2.

另请参阅底部的webpack、angular等提示。

1.简单包含

1.1. 包括来自资产

1.1.1. 包含自资产（外部UI依赖项）

Fancytree依赖于jQuery和jQuery UI的一小部分。如果jQuery UI已经是项目的一部分，Fancytree将很好地集成：

<链接 href公司="jquery.fancytree/dist/skin-win8/ui.fancystree.css"相对="样式表">
<!-- 项目使用的jQuery和jQuery UI-->
<脚本 型钢混凝土="资产/jquery.js"></脚本>
<脚本 型钢混凝土="资产/jquery-ui.custom.js"></脚本>
<!-- 捆绑Fancytree核心和大多数扩展：-->
<脚本 型钢混凝土="jquery.fancytree/dist/jquery.tafncytree-all.min.js"></脚本>

如果您想选择扩展名，请分别列出：

<链接 href公司="jquery.fancytree/dist/skin-win8/ui.fancystree.css"相对="样式表">
<!-- 项目使用的jQuery和jQuery UI-->
<脚本 型钢混凝土="资产/jquery.js"></脚本>
<脚本 型钢混凝土="资产/jquery-ui.custom.js"></脚本>
<!-- Fancytree核心和所选扩展：-->
<脚本 型钢混凝土="jquery.fancytree/dist/modules/jquery.fancytree.js"></脚本>
<脚本 型钢混凝土="jquery.fancytree/dist/modules/jquery.11ncytree-edit.js"></脚本>
<脚本 型钢混凝土=“jquery.fancytree/dist/modules/jquery.tafncytree-filter.js"></脚本>

1.1.2. 包含自资产（嵌入的UI依赖项）

但我们不需要显式地引入jQuery UI，只需针对Fancytree。使用完整的“all-deps”构建：

<链接 href公司="jquery.fancytree/dist/skin-win8/ui.fancystree.css"相对="样式表">
<!-- 项目使用的jQuery-->
<脚本 型钢混凝土=“资产/jquery.js"></脚本>
<!-- 捆绑Fancytree核心和大多数扩展以及所需的jQuery UI小部件：-->
<脚本 型钢混凝土="jquery.fancytree/dist/jquery.ancytree-all-deps.min.js"></脚本>

如果您想选择扩展名，请分别列出：

<链接 href公司="jquery.fancytree/dist/skin-win8/ui.fancystree.css"相对="样式表">
<!-- 项目使用的jQuery-->
<脚本 型钢混凝土="资产/jquery.js"></脚本>
<!-- Fancytree核心和所选扩展：-->
<脚本 型钢混凝土="jquery.fancytree/dist/modules/jquery.11ncytree.ui-deps.js"></脚本>
<脚本 型钢混凝土="jquery.fancytree/dist/modules/jquery.tavencytree.js"></脚本>
<脚本 型钢混凝土="jquery.fancytree/dist/modules/jquery.11ncytree-edit.js"></脚本>
<脚本 型钢混凝土="jquery.fancytree/dist/modules/jquery.tafncytree-filter.js"></脚本>

1.2. 从CDN中包含

1.2.1. 从CDN中包含（外部UI依赖项）

<链接 href公司="//cdn.jsdeliver.net/npm/jquery.fancytree@2.25/dist/skin-win8/ui.fancytree.min.css系列"相对="样式表">
<脚本 型钢混凝土="//代码.jquery.com/jquery-3.6.0.min.js"></脚本>
<脚本 型钢混凝土="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></脚本>
<!-- 捆绑Fancytree核心和大多数扩展：-->
<脚本 型钢混凝土="//cdn.jsdeliver.net/npm/jquery.fancytree@2.27/dist/jquery.fancytree-all.min.js"></脚本>

1.2.2. 从CDN中包含（嵌入式UI依赖项）

<链接 href公司=“//cdn.jsdeliver.net/npm/jquery.fancytree@2.25/dist/skin-win8/ui.fancytree.min.css"相对="样式表">
<脚本 型钢混凝土="//code.jquery.com/jquery-3.6.0.min.js"></脚本>
<!-- 捆绑Fancytree核心和大多数扩展以及所需的jQuery UI小部件：-->
<脚本 型钢混凝土="//cdn.jsdeliver.net/npm/jquery.fancytree@2.27/dist/jquery.fancytree-all-deps.min.js"></脚本>

2.AMD（require.js）

2.1. AMD/require.js（外部UI依赖项）

如果项目已经包含jQuery UI，那么这应该可以工作。

待办事项：测试内部jQuery UI依赖项是否与可能的冲突显式包含。

要求([
  “jquery”,
  'jquery.fancytree/dist/modules/jquery.ancytree',
  'jquery.fancytree/dist/modules/jquery.ancytree.filter'
], 功能($) {
  $(“#tree”).奇树({。。。});
});

2.2. AMD/require.js（嵌入式UI依赖项）

Fancytree核心模块还引入了一些内部依赖项（jquery.Fancytree-ui-deps.js），因此，即使项目确实如此，这也应该是可行的不否则请使用jQuery UI：

要求([
  “jquery”,
  'jquery.fancytree/dist/modules/jquery.ancytree',
  'jquery.fancytree/dist/modules/jquery.fancytree.filter'
], 功能($) {
  $(“#tree”).奇树({。。。});
});

3.ES6模块（或CommonJS）

例如，使用网络包，我们可以这样使用模块模式：

进口('jquery.fancytree/dist/skin-lion/ui.fancystree.css');  //CSS或更少
常数 $ = 要求(“jquery”);
常数 奇树 = 要求(“jquery.fancytree”);

$(功能(){
  $(“#tree”).奇树({。。。});
  常数 树 = 扇形三角形.获取树(“#tree”);
})

或

进口 'jquery.fancytree/dist/skin-lion/ui.fancystree.less'
进口 {创建树, 版本} 从 “jquery.fancytree”
进口 'jquery.fancytree/dist/modules/jquery.ancytree.edit';

常数 树 = 创建树(“#tree”, {。。。});

Fancytree（与任何jQuery小部件一样）使用全局jQuery公司/$命名空间。

我们使用提供插件和别名选项，以便Fancytree的AMD包装器将插件注册到全球的jQuery实例。

webpack.config.js:

/**
*示例Webpack配置，使jQuery可用并允许
*require（'jquery.fancytree'）
*/

常数 路径 = 要求(“路径”),
  网络包 = 要求('网络包'),
  ExtractTextPlugin（提取文本插件） = 要求(“extract-text-webback-plugin”),
  清单修订插件 = 要求('声明-修订-webpack-plugin')

模块.出口 = {
  进入:{。。。},
  输出:{。。。},
  决定:{。。。别名:{
      //注意：需要将jQuery插件加载到*global*jQuery实例中：
      “jquery”:要求.决定(“jquery”)
    }
  },
  模块:{
    规则:[
        { 测试:/\.js文件$/我, 排除:/节点_模块/, 装载机:“婴儿装饰品” },
        { 测试:/\.css文件$/我, 使用:['样式加载程序', “css-loader”] },
        { 测试:/\更少$/我, 使用:['样式加载程序', “css-loader”, “less-loader”] },
        { 测试:/\.（？：png|jpe？g|svg|gif）$/我, 使用:[ { 装载机:'url-loader', 选项:{
            限制:10000  //小于10kb的内联图像作为数据URI
          } } ]
        }
    ]
  },
  插件:[
    新的 网络包.提供插件({
      //使jQuery/$在每个模块中都可用：
      $:“jquery”,
      jQuery公司:“jquery”,
      //注意：需要将jQuery插件加载到*global*jQuery实例中：
      jquery（jquery）:“jquery”
    }),。。。],。。。}

食谱

[Howto]用Angular 8运行Fancytree

注：另请参阅

作者：mojo2405

经过几天的试验，我在Angular 4上成功地运行了Fancytree。你应该把它添加到手册中。

通过npm安装jQuery和Fancytree：
npm安装jquery jquery.fancytree
安装jQuery和Fancytree类型：
npm安装--保存@types/jquery@types/jquery.fancytree

在angular.json内的脚本数组中包含jQuery和Fancytree，例如：

“脚本”:[
        “../node_modules/jquery/dist/jquery.min.js”,
        “../node_modules/jquery.fancytree/dist/jquery.fancytrea-all-deps.min.js”
        ]

在angular.json中的样式数组中包含Fancytree样式。例如。：

“样式”:[
    “../node_modules/jquery.fancytree/dist/skin-win8/ui.fancystree.min.css”
    ],

将jQuery和Fancytree添加到tsconfig.app.json文件中的types数组中，例如：

“编译器选项”:{。。。“类型”:[“jquery”,“jquery.fancytree”]
}

在styles.css文件中导入Fancytree css：

@导入 '../节点模块/jquery.fancytree/dist/skin-win8/ui.fancytree.min.css'

将Fancytree html添加到html组件，例如：
```
<div公司 身份证件="树"></div公司>
```

在typescript文件中导入jQuery和Fancytree：

。。。进口 * 作为 $ 从 “jquery”;
常数 奇树 = 要求(“jquery.fancytree”);。。。

将jQuery Fancytree添加到类型脚本文件中并提供一些数据，例如：

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

[Howto]将Fancytree与requirejs一起使用

待办事项：以下可能是Fancytree 2.25+的过时版本。

djangosdk供稿

目前，很少有文档显示如何使用requirejs最新版本。以下是如何使用jquery.fancytree所有和最新jquery-ui在AMD的支持下，因为使用单个扩展需要大量填隙。

要求.配置({
  路径:{
    “jquery”:'./js/vendor/jquery“,
    “jquery-ui”:'./js/vendor/jquery-ui',
    “jquery.fancytree”:'./js/vendor/fancytree/jquery.fancytrea-all“
  },
  垫片:{
    “jquery.fancytree”:{
      deps公司:[“jquery”, “jquery-ui/core”, 'jquery-ui/effect', “jquery-ui/effects/effect-blind”, “jquery-ui/widgets/draggable”, “jquery-ui/widgets/droppable”],
      出口:“jQuery.fn.fancytree”
    }
  },
  onBuildWrite（内部版本写入）:功能 (模块名, 路径, 目录) {
    '使用严格';
    如果 (模块名 === 'jquery.fancytree') {
      目录 = '定义（“jquery.fancytree”，[“jquery”，“jquely-ui/core”，“jquery-ui/effects/effect-blind”，“j查询-ui/widgets/draggable”，“J查询-ui/小部件/droppable”]，函数（jquery）{' + 目录 + '});';
    }
    返回 目录;
  }
});

//使用
 定义([
     “jquery”,
     “jquery.fancytree”,
     “css/css/fancetree/skin-custom/ui.fancetree.css',
   ],
   功能($) {
     '使用严格';
     //
     $(“#tree”).扇形三角形({
       复选框:真的,
       来源:[{标题:'节点1'}, {标题:'节点2',钥匙:“id2”}]
     });
     //
   });
//

索引

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

提供反馈

保存的搜索

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