动态可检查树视图插件 jQuery Flex Tree

  • 源码大小:15.18KB
  • 所需积分:1积分
  • 源码编号:19JP-3511
  • 浏览次数:650次
  • 最后更新:2023年06月21日
  • 所属栏目:其他
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

jQuery Flex Tree插件以动态、交互式、可折叠的树结构提供分层数据,并支持复选框和单选按钮。

更多功能:

  • 可折叠和可扩展。
  • 滑动和淡入淡出动画。
  • 支持不确定的复选框。
  • 跨浏览器。

如何使用它:

1.将jQuery库与flex树插件的文件一起插入到html页面中。

  1. <!-- Main Stylesheet -->
  2. <link href="dist/flex-tree.min.css" rel="stylesheet">
  3.  
  4. <!-- Minimal Skin -->
  5. <link href="dist/flex-tree-minimal.min.css" rel="stylesheet">
  6.  
  7. <!-- jQuery Library -->
  8. <script src="/path/to/cdn/jquery.min.js"></script>
  9.  
  10. <!-- Main JavaScript -->
  11. <script src="dist/flex-tree.min.js"></script>

2.创建一个容器来放置树状视图。

  1. <div id="flex-tree-container"></div>

3.在数组或JSON对象中定义您自己的分层数据。

  1. const myData = [
  2. {
  3. label: 'Item 1',
  4. childrens: [
  5. {
  6. label: 'Item 1.1',
  7. value: 'item_1_1',
  8. checked: true
  9. },
  10. {
  11. label: 'Item 1.2',
  12. value: 'item_1_2',
  13. childrens: [
  14. {
  15. label: 'Item 1.2.1',
  16. value: 'item_1_2_1',
  17. childrens: [
  18. {
  19. label: 'Item 1.2.2.1',
  20. value: 'item_1_2_2_1' },
  21.  
  22. {
  23. label: 'Item 1.2.2.2',
  24. value: 'item_1_2_2_2',
  25. id: 'foo' }
  26. ]
  27. },
  28. ]}
  29. ]}
  30. ]

4.在您刚刚创建的容器元素中渲染一个基本的树状视图。

  1. $('#flex-tree-container').flexTree({
  2. items: myData
  3. });

5.将输入控件(例如复选框或单选按钮)添加到树节点。

  1. $('#flex-tree-container').flexTree({
  2. items: myData,
  3. type: 'checkbox',
  4. });
  5.  
  6. $('#flex-tree-container').flexTree({
  7. items: myData,
  8. type: 'radio',
  9. });

6.自定义树状视图的可能选项。

  • 构建树:构建html结构。
  • 目标元素:jQuery目标元素对象。
  • 调试:调试模式。
  • 类型:<input>的类型
  • 姓名:<input>元素的名称。
  • 类名称:类名小部件。
  • 可折叠:使树可折叠。
  • 已折叠:加载时折叠的树。
  • 在父项上添加控件:将控件添加到父节点
  • 三态:在复选框上启用三状态行为。
  1. $('#flex-tree-container').flexTree({
  2. id: undefined,
  3. targetElement: $( this ),
  4. type: undefined,
  5. debug: false,
  6. name: 'flex_tree',
  7. items: {},
  8. className: 'flex-tree',
  9. buildTree: true,
  10. collapsed: false,
  11. collapsable: true,
  12. addControlOnParent: true,
  13. threeState: true
  14. });

更新日志:

v1.2.2 (2022-06-21)

  • 添加了flex-tree-minimal.css皮肤。

v1.2.1 (2022-06-19)

  • 为ul-flex树元素添加了CSS填充。
  • 删除了重复的行代码。

v1.2.0 (2020-08-20)

  • 添加了addControlOnParent和threeState构造函数参数。

预览截图