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中去就可以了
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（多级文件）插件如何使用的更多相关文章
- JS客户端读取Excel文件插件js-xls使用方法
js-xls是一款客户端读取Excel的插件,亲测IE11.FireFox.Chrome可用,读取速度也客观. 插件Demo地址:http://oss.sheetjs.com/js-xlsx/ ...
- jquery多级手风琴插件–accordion.js
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...
- 解决VSCode中使用vetur插件格式化vue文件时，js代码会自动加上冒号和分号
解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号 在设置中把"vetur.format.defaultFormatter.js": " ...
- jq和js插件的各个文件夹里放置的内容
1. demo文件夹,存放各种实例. 2. dist文件夹,全称是distribution.在某些框架中,因为开发和发布的内容或者代码形式是不一样的(比如利用Grunt压缩等等),这时候就需要一个存放 ...
- Uploadify 上传文件插件详解
Uploadify 上传文件插件详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中 ...
- 纯原生js移动端城市选择插件
接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...
- jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案
jquery.validate.js校验select2解决方案 Jquery插件select2校验解决方案 >>>>>>>>>>>&g ...
- Jquery多级菜单插件Slimmenu使用说明
Jquery多级菜单插件Slimmenu使用说明 现在扁平化设计逐渐的成为了趋势,不管是pc web,还是移动互联网的应用开发,都在研究和设计Flat ui, 这里有一篇文章说明扁平化的设计的一些想法 ...
- weixinShare.js / 极简微信分享插件
weixinShare.js / 极简微信分享插件 / 版本:0.1 这是一个很简单.很实用的微信分享插件,无需jQuery,只需要在网页里加入一行JS代码,即可自动识别微信浏览器并启动微信分享的提示 ...
随机推荐
- 微信小程序领取卡券
微信小程序领取卡券 标签(空格分隔): php 开发前需要准备的工作 1 小程序和公众号要有绑定 2 小程序和该公众号要绑定到同一个开发平台下 [https://open.weixin.qq.com/ ...
- Spring Boot: Tuning your Undertow application for throughput--转
原文地址:https://jmnarloch.wordpress.com/2016/04/26/spring-boot-tuning-your-undertow-application-for-thr ...
- springmvc 1.接受日期类型的参数 2.后台返回json串的格式处理(返回json串null值处理为"")
springmvc中的配置: <bean id="dateConvert" class="com.iomp.util.DateConvert"/> ...
- fullpage中大的图片超过一屏怎么在手机端滑动显示？
fullpage中大的图片超过一屏怎么在手机端滑动显示?(设置overflow电脑端是会出现滚动条的,但是在手机端不出现滚动条,图片也不可左右滑动显示) var $window = $(window) ...
- HD-ACM算法专攻系列（2）——Rightmost Digit
题目描述: 源码: /**/ #include"iostream" using namespace std; int main() { int t, mod; long long ...
- 最简单的TCP程序
网络编程里面最简单的一个tcp程序,把一个文件从客户端上传到服务器端,上传成功后服务器端提示上传完成.代码不多,一个服务端和一个客户端. 服务端代码: import java.io.FileOutpu ...
- 位运算与bitset
&运算 将两个数转化为二进制后,对应的位置上相同即取,通常取1,所以&通常情况下可以用来枚举子集 设x为表示集合的整数,那么这个整数有如下性质: x的子集整数y在数值上不会比x大.因 ...
- Data flow diagram-数据流图
A DFD shows what kind of information will be input to and output from the system, how the data will ...
- Python3基础笔记---re模块
参考博客: Py西游攻关之模块 就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现.正则表达式模式被编译成一系列 ...
- JTable表格案例
package com.szht.gpy.frame; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import ...