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. Python3基础笔记---re模块

    参考博客: Py西游攻关之模块 就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现.正则表达式模式被编译成一系列 ...

  2. 记intel杯比赛中各种bug与debug【其五】：朴素贝叶斯分类器的实现和针对性的优化

    咱这个项目最主要的就是这个了 贝叶斯分类器用于做可以统计概率的二元分类 典型的例子就是垃圾邮件过滤 理论基础 对于贝叶斯算法,这里附上两个链接,便于理解: 朴素贝叶斯分类器的应用-阮一峰的网络日志 基 ...

  3. caioj 1080 动态规划入门（非常规DP4：乘电梯）(dp数组更新其他量)

    我一开始是这么想的 注意这道题数组下标是从大到小推,不是一般的从小到大推 f[i]表示从最高层h到第i层所花的最短时间,答案为f[1] 那么显然 f[i] = f[j] + wait(j) + (j ...

  4. windows server 打开 FTP 服务器上的文件夹时发生错误。请检查是否有权限访问该文件夹。

    解决方案1: 打开高级安全windows防火墙,设置出入站规则. 然后,再打开windows防火墙界面,点击左上角“允许程序或功能通过windows防火墙”,勾选上设置的出入站名称和FTP服务器. 如 ...

  5. COGS——T1588. [USACO FEB04]距离咨询

    http://cogs.pro/cogs/problem/problem.php?pid=1588 ★★   输入文件:dquery.in   输出文件:dquery.out   简单对比时间限制:1 ...

  6. java教程（五）SSH框架-配置

    前言:从这篇博客開始我将继续讲述Java教程:SSH篇.主要内容环绕SSH框架分析与搭建,今天先简介一下SSH的配置. SSH配置顺序是: spring-->hibernate-->str ...

  7. Linux下EPoll通信模型简析

    EPoll基于I/O的事件通知机制,由系统通知用户那些SOCKET触发了那些相关I/O事件.事件中包括相应的文件描写叙述符以及事件类型.这样应用程序能够针对事件以及事件的source做相应的处理(Ac ...

  8. vue2.0-transition配合animate.css

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 线程池系列三：ThreadPoolExecutor讲解

    三.一个用队列处理线程池例子 package demo; import java.util.Queue; import java.util.concurrent.ArrayBlockingQueue; ...

  10. 在IIS中给某一个网站添加binding的坑

    以http为例, 假如ip地址从局域网的地址172.31.212.20改为127.0.0.1 但是网站没法访问了http://172.31.212.20/chile.backoffice/  必须通过 ...