微信扫一扫打赏支持

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

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中去就可以了

 1   var data = [
 2     {
 3       title: '苹果公司',
 4       type: 'folder',
 5       products: [
 6         {
 7           title: 'iPhone',
 8           type: 'item'
 9         },
10         {
11           title: 'iMac',
12           type: 'item'
13         },
14         {
15           title: 'MacBook Pro',
16           type: 'item'
17         }
18       ]
19     },
20     {
21       title: '微软公司',
22       type: 'item'
23     },
24     {
25       title: 'GitHub',
26       type: 'item',
27       attr: {
28         icon: 'am-icon-github'
29       }
30     }
31   ];
32 
33   $('#firstTree').tree({
34     dataSource: function(options, callback) {
35       // 模拟异步加载
36       setTimeout(function() {
37         callback({data: options.products || data});
38       }, 400);
39     },
40     multiSelect: false,
41     cacheItems: true,
42     folderSelect: false
43   });

 

 

 

 

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

1、截图

 

 

 

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <!-- amazeui的默认引入 -->
 7     <link rel="stylesheet" href="../../../css/amazeui.min.css">
 8     <script src="../../../js/jquery.min.js"></script>
 9     <script src="../../../js/amazeui.min.js"></script>
10 
11     <!-- 插件对应的js和css -->
12     <link rel="stylesheet" href="../dist/amazeui.tree.min.css">
13     <script src="../dist/amazeui.tree.min.js"></script>
14 
15 </head>
16 <body>
17 <ul class="am-tree" id="firstTree">
18   <li class="am-tree-branch am-hide" data-template="treebranch">
19     <div class="am-tree-branch-header">
20       <button class="am-tree-branch-name">
21         <span class="am-tree-icon am-tree-icon-folder"></span>
22         <span class="am-tree-label"></span>
23       </button>
24     </div>
25     <ul class="am-tree-branch-children"></ul>
26     <div class="am-tree-loader"><span class="am-icon-spin am-icon-spinner"></span></div>
27   </li>
28   <li class="am-tree-item am-hide" data-template="treeitem">
29     <button class="am-tree-item-name">
30       <span class="am-tree-icon am-tree-icon-item"></span>
31       <span class="am-tree-label"></span>
32     </button>
33   </li>
34 </ul>
35 </body>
36 <script>
37   var data = [
38     {
39       title: '苹果公司',
40       type: 'folder',
41       products: [
42         {
43           title: 'iPhone',
44           type: 'item'
45         },
46         {
47           title: 'iMac',
48           type: 'item'
49         },
50         {
51           title: 'MacBook Pro',
52           type: 'item'
53         },
54         {
55           title: 'MacBook Pro',
56           type: 'item'
57         }
58       ]
59     },
60     {
61       title: '微软公司',
62       type: 'item'
63     },
64     {
65       title: '苹果公司',
66       type: 'item'
67     },
68     {
69       title: 'GitHub',
70       type: 'item',
71       attr: {
72         icon: 'am-icon-github'
73       }
74     },
75     {
76       title: 'GitHub',
77       type: 'item',
78     }
79   ];
80 
81   $('#firstTree').tree({
82     dataSource: function(options, callback) {
83       // 模拟异步加载
84       setTimeout(function() {
85         callback({data: options.products || data});
86       }, 400);
87     },
88     multiSelect: false,
89     cacheItems: true,
90     folderSelect: false
91   });
92 </script>
93 </html>

 

 

 

 
posted @ 2018-08-26 13:55  范仁义  阅读(1054)  评论(0)  编辑  收藏  举报