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代码,即可自动识别微信浏览器并启动微信分享的提示 ...
随机推荐
- BZOJ 1711 网络流
思路: 神建图 源->饮料 边权为1 牛拆点 两个点之间的边权为1 饮料->左牛 边权为1 右牛->食品 边权为1 食品->汇边权为1 //By SiriusRen #incl ...
- [POI2011]MET-Meteors 整体二分_树状数组_卡常
线段树肯定会 TLE 的,必须要用树状数组. Code: // luogu-judger-enable-o2 #include <cstdio> #include <algorith ...
- 洛谷 P1407 工资
P1407 工资 题目描述 有一家世界级大企业,他们经过调查,发现了一个奇特的现象,竟然在自己的公司里,有超过一半的雇员,他们的工资完全相同! 公布了这项调查结果后,众多老板对于这一现象很感兴趣,他们 ...
- c#+ArcGIS Engine-获取矢量图层的空间参考
转自原文c#+ArcGIS Engine-获取矢量图层的空间参考 介绍一种简单的获取矢量图层空间参考的方法: 首先打开Shp文件获得FeatureClass,代码如下: string pPath=&q ...
- C++模板中重要的术语
- (2) 我的结果- spec2006中精确的simulation points运行点
spec06中获取simpoints的环境说明: spec的版本号为spec2006v1.0; 使用ref input with runspec; 100millions为周期生成的simpoints ...
- 识别CentOS和Ubuntu的系统版本
识别CentOS和Ubuntu的系统版本1.用 lsb-release#!/bin/bashInstall_LSB(){ if [ "$PM" = "yum ...
- vim 插件之 surround.vim
surround.vim-这个插件主要是用来插入一些特殊符号的(成对出现) 下载地址 http://www.vim.org/scripts/script.php?script_id=1697 http ...
- bean初始化、注销
关于在spring 容器初始化 bean 和销毁前所做的操作定义方式有三种: 第一种:通过@PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作 第二 ...
- 推荐的JavaScript编码规范
http://www.qdfuns.com/notes/26812/7825414125719306fa409c709ee7b2a3.html