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代码,即可自动识别微信浏览器并启动微信分享的提示 ...
随机推荐
- Spring 注解拦截器使用详解
Spring mvc拦截器 平时用到的拦截器通常都是xml的配置方式.今天就特地研究了一下注解方式的拦截器. 配置Spring环境这里就不做详细介绍.本文主要介绍在Spring下,基于注解方式的拦截器 ...
- Map<String,String>转换json字符串
import java.util.HashMap; import java.util.Map; import net.sf.json.JSONObject; public class testJson ...
- UI Framework-1: Aura and Shell dependencies
Aura and Shell dependencies The diagram below shows the dependencies of Chrome, Ash (Aura shell), vi ...
- kubernetes学习与实践篇（二） kubernetes1.5 的安装和集群环境部署
kubernetes 1.5 的安装和集群环境部署 文章转载自:http://www.cnblogs.com/tynia/p/k8s-cluster.html 简介: Docker:是一个开源的应用容 ...
- [NOIP2014提高组]联合权值
题目:洛谷P1351.Vijos P1906.codevs3728.UOJ#16. 题目大意:有一个无向连通图,有n个点n-1条边,每个点有一个权值$W_i$,每条边长度为1.规定两个距离为2的点i和 ...
- python、js 时间日期模块time
python 参考链接:https://www.runoob.com/python/python-date-time.html 时间戳 >>> print(time.time())# ...
- HDFS文件系统上传时序图 PB级文件存储时序图
自己设计的时序图. 来自为知笔记(Wiz)
- C++归并算法
#include <iostream> using namespace std; void DealWhat(int ar[],int start,int end,int b[]) { i ...
- HTML5学习笔记简明版（11）：新增的API
HTMLDocument上的扩展 HTML5在DOM Level 2 HTML上扩展了一些HTMLDocument的接口.这些接口在全部实现了Document接口的元素对象上进行了实现. HTML5在 ...
- Android4.42-Settings源代码分析之蓝牙模块Bluetooth（上）
继上一篇Android系统源代码剖析(一)---Settings 接着来介绍一下设置中某个模块的源代码.本文依然是基于Android4.42源代码进行分析,分析一下蓝牙模块的实现.建议大致看一下关于S ...