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代码,即可自动识别微信浏览器并启动微信分享的提示 ...
随机推荐
- Kali linux 2016.2（Rolling）中metasploit的主机探测
不多说,直接上干货! 1.活跃主机扫描 root@kali:~# ping -c 202.193.58.13 PING () bytes of data. bytes ttl= time=25.4 m ...
- linux中不同颜色的文件代表什么不同的类型
linux 文件颜色的含义,蓝色代表目录,绿色代表可执行文件,红色表示压缩文件,浅蓝色表示链接文件,灰色表示其他文件,红色闪烁表示链接的文件有问题了,黄色表示设备文件.蓝色文件----------目. ...
- IE(8~11+) 可用右键加速器
必应词典工具 立即安装: 网络安装:http://dict.bing.com.cn/tools_dl.aspx?dl=ie8acc&mkt=ZH-CN 开发示例: <?xml versi ...
- TabLayout中Indicator的样式修改
最近写一个项目的时候用到了TabLayout,其中Indicator只是固定的一条横线,样式只能修改Color和Height,没有办法改变形状和宽度等其他信息. 经过查看TabLayout类的源码,发 ...
- rails 开发随手记 7
jQuery 1.9 中如何修改选择项 $("select option:contains(teacher5)").prop('selected', 'selected'); 效果 ...
- Boom
紧急事件!战场内被敌军埋放了n枚炸弹! 我军情报部门通过技术手段,掌握了这些炸弹的信息.这些炸弹很特殊,每枚炸弹的波及区域是一个矩形.第i枚炸弹的波及区域是以点(xi1,yi1)为左下角,点(xi2, ...
- vue中的三级联动
1.template里面的内容 2.js里面的内容 3.函数怎么写? 这是一个省市区的三级联动,首先你要传递中国的id,这样才能获取到所有的省份,所以在vue的项目中,我需要发一次进页面就请求(来得到 ...
- [笔记-图论]Dijkstra
用于求正权有向图 上的 单源最短路 优化后时间复杂度O(mlogn) 模板 // Dijkstra // to get the minumum distance with no negtive way ...
- FOJ1205 小鼠迷宫问题 (BFD+递推)
FOJ1205 小鼠迷宫问题 (BFD+递推) 小鼠a与小鼠b身处一个m×n的迷宫中,如图所示.每一个方格表示迷宫中的一个房间.这m×n个房间中有一些房间是封闭的,不允许任何人进入.在迷宫中任何位置均 ...
- mysql生成随机时间
mysql> update test set create_time=concat('2013-10-01 ', floor(10+rand()*10),':',floor(10+rand()* ...