js插件---tree（多级文件）插件如何使用

一、总结

一句话总结：还是一般的引入js和css后js调用的方式，

只不过tree调用的时候必须设置一个 HTML 模板（就是调用的那段html代码，别的插件也算有）

还有写data数据的时候分清文件夹（type：'folder'）和文件（type：'item'）两种类型

1、tree插件的元素的两个项目是什么？

文件夹（type：'folder'）和文件（type：'item'）

  var data = [

    {

      title: '苹果公司',

      type: 'folder',

      products: [

        {

          title: 'iPhone',

          type: 'item'

        },

        {

          title: 'iMac',

          type: 'item'

        },

        {

          title: 'MacBook Pro',

          type: 'item'

        }

      ]

    },

    {

      title: '微软公司',

      type: 'item'

    },

    {

      title: 'GitHub',

      type: 'item',

      attr: {

        icon: 'am-icon-github'

      }

    }

  ];

2、插件中的数据（data）如何用到插件中？

作为参数传递到插件的api中去就可以了

   var data = [

     {

       title: '苹果公司',

       type: 'folder',

       products: [

         {

           title: 'iPhone',

           type: 'item'

         },

         {

           title: 'iMac',

           type: 'item'

         },

         {

           title: 'MacBook Pro',

           type: 'item'

         }

       ]

     },

     {

       title: '微软公司',

       type: 'item'

     },

     {

       title: 'GitHub',

       type: 'item',

       attr: {

         icon: 'am-icon-github'

       }

     }

   ];

   $('#firstTree').tree({

     dataSource: function(options, callback) {

       // 模拟异步加载

       setTimeout(function() {

         callback({data: options.products || data});

       }, 400);

     },

     multiSelect: false,

     cacheItems: true,

     folderSelect: false

   });

二、js插件---tree（多级文件）插件如何使用

1、截图

 

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <!-- amazeui的默认引入 -->

     <link rel="stylesheet" href="../../../css/amazeui.min.css">

     <script src="../../../js/jquery.min.js"></script>

     <script src="../../../js/amazeui.min.js"></script>

     <!-- 插件对应的js和css -->

     <link rel="stylesheet" href="../dist/amazeui.tree.min.css">

     <script src="../dist/amazeui.tree.min.js"></script>

 </head>

 <body>

 <ul class="am-tree" id="firstTree">

   <li class="am-tree-branch am-hide" data-template="treebranch">

     <div class="am-tree-branch-header">

       <button class="am-tree-branch-name">

         <span class="am-tree-icon am-tree-icon-folder"></span>

         <span class="am-tree-label"></span>

       </button>

     </div>

     <ul class="am-tree-branch-children"></ul>

     <div class="am-tree-loader"><span class="am-icon-spin am-icon-spinner"></span></div>

   </li>

   <li class="am-tree-item am-hide" data-template="treeitem">

     <button class="am-tree-item-name">

       <span class="am-tree-icon am-tree-icon-item"></span>

       <span class="am-tree-label"></span>

     </button>

   </li>

 </ul>

 </body>

 <script>

   var data = [

     {

       title: '苹果公司',

       type: 'folder',

       products: [

         {

           title: 'iPhone',

           type: 'item'

         },

         {

           title: 'iMac',

           type: 'item'

         },

         {

           title: 'MacBook Pro',

           type: 'item'

         },

         {

           title: 'MacBook Pro',

           type: 'item'

         }

       ]

     },

     {

       title: '微软公司',

       type: 'item'

     },

     {

       title: '苹果公司',

       type: 'item'

     },

     {

       title: 'GitHub',

       type: 'item',

       attr: {

         icon: 'am-icon-github'

       }

     },

     {

       title: 'GitHub',

       type: 'item',

     }

   ];

   $('#firstTree').tree({

     dataSource: function(options, callback) {

       // 模拟异步加载

       setTimeout(function() {

         callback({data: options.products || data});

       }, 400);

     },

     multiSelect: false,

     cacheItems: true,

     folderSelect: false

   });

 </script>

 </html>
 

js插件---tree（多级文件）插件如何使用的更多相关文章

  1. JS客户端读取Excel文件插件js-xls使用方法

    js-xls是一款客户端读取Excel的插件,亲测IE11.FireFox.Chrome可用,读取速度也客观. 插件Demo地址:http://oss.sheetjs.com/js-xlsx/    ...

  2. jquery多级手风琴插件–accordion.js

    手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...

  3. 解决VSCode中使用vetur插件格式化vue文件时，js代码会自动加上冒号和分号

    解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号 在设置中把"vetur.format.defaultFormatter.js": " ...

  4. jq和js插件的各个文件夹里放置的内容

    1. demo文件夹,存放各种实例. 2. dist文件夹,全称是distribution.在某些框架中,因为开发和发布的内容或者代码形式是不一样的(比如利用Grunt压缩等等),这时候就需要一个存放 ...

  5. Uploadify 上传文件插件详解

    Uploadify 上传文件插件详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中 ...

  6. 纯原生js移动端城市选择插件

    接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...

  7. jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案

    jquery.validate.js校验select2解决方案 Jquery插件select2校验解决方案 >>>>>>>>>>>&g ...

  8. Jquery多级菜单插件Slimmenu使用说明

    Jquery多级菜单插件Slimmenu使用说明 现在扁平化设计逐渐的成为了趋势,不管是pc web,还是移动互联网的应用开发,都在研究和设计Flat ui, 这里有一篇文章说明扁平化的设计的一些想法 ...

  9. weixinShare.js / 极简微信分享插件

    weixinShare.js / 极简微信分享插件 / 版本:0.1 这是一个很简单.很实用的微信分享插件,无需jQuery,只需要在网页里加入一行JS代码,即可自动识别微信浏览器并启动微信分享的提示 ...

随机推荐

  1. PostgreSQL两种事务隔离级

    PostgreSQL两种事务隔离级别: 读已提交:PostgreSQL中缺省隔离级别.当一个事务运行在这个隔离级别时,一个SELECT查询只能看到查询开始之前提交的数据而永远无法看到未提交的数据或者在 ...

  2. 比起 Windows，怎样解读 Linux 的文件系统与目录结构？

    Linux 和 Windows 的文件系统有些不同,在学习使用 Linux 之前,若能够了解这些不同,会有助于后续学习. 本文先对 Windows 和 Linux 上面文件系统原理.组织概念进行区分, ...

  3. bzoj 2287: 【POJ Challenge】消失之物 动态规划

    Code: #include<cstdio> #include<algorithm> #include<queue> #include<cstring> ...

  4. [HEOI2012]旅行问题 AC 自动机

    题意: 求两个字符串的最长公共后缀,使得该后缀是某个字符串的前缀. 题解: 直接利用 $fail$ 指针的定义即可. 相当于求自动机上两点的 LCA,好像倍增可以,怕炸空间就老老实实写树剖吧. Cod ...

  5. include、require、include_once和require_once的区别

    /*** * 1.include 和 require 的文件可以有返回值 * 2.include 包含的文件不存在,会发出一个警告,但是不会停止执行代码. * require 在这种情况下会抛出错误并 ...

  6. md5sum---文件校验和

    md5sum命令采用MD5报文摘要算法(128位)计算和检查文件的校验和.一般来说,安装了Linux后,就会有md5sum这个工具,直接在命令行终端直接运行. MD5算法常常被用来验证网络文件传输的完 ...

  7. ArcGIS api for javascript——合并两个ArcGIS Online服务

    描述 这个示例创建一个地图并ArcGIS Online增加连个图层到地图.ArcGIS Online是由ESRI体提供的一组切片地图服务,可以用来通过高质量的地图和数据增强应用.这个示例增加影像和运输 ...

  8. CoAP与物联网系统

    CoAP简单介绍 引自维基百科上的介绍,用的是谷歌翻译... 受约束的应用协议(COAP)是一种软件协议旨在以很easy的电子设备.使他们能够在互联网上进行交互式通信中使用. 它特别针对小型低功率传感 ...

  9. JAVA并发-为现有的线程安全类添加原子方法

    JAVA中有许多线程安全的基础模块类,一般情况下,这些基础模块类能满足我们需要的所有操作,但更多时候,他们并不能满足我们所有的需要.此时,我们需要想办法在不破坏已有的线程安全类的基础上添加一个新的原子 ...

  10. php中对象转数组有哪些方法（总结测试）

    php中对象转数组有哪些方法(总结测试) 一.总结 一句话总结:json_decode(json_encode($array),true)和array强制转换(或带递归) 1.array方式强制转换对 ...