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代码,即可自动识别微信浏览器并启动微信分享的提示 ...
随机推荐
- 18.查询效率最高的unordered_map
#include <string> #include <iostream> //查询性能最高 //增删查改与map是一样的,但是本质区别就是unordered_map底层是ha ...
- EntityFramework学习笔记1--安装
1.新建项目 2.工具=>NuGet程序包管理器=>程序包管理控制器 3.PM> Install-Package EntityFramework 安装EF
- Spring深入浅出（一）IOC的基本知识
Spring前言 Spring是一个企业级开发框架,为解决企业级项目开发过于复杂而创建的,框架的主要优势之一就是分层架构,允许开发者自主选择组件. Spring的两大核心机制是IOC(控制反转)和AO ...
- codeforces 400 C Inna and Huge Candy Matrix【模拟】
题意:给出一个矩形的三种操作,顺时针旋转,逆时针旋转,对称,给出原始坐标,再给出操作数,问最后得到的坐标 画一下模拟一下操作就可以找到规律了 #include<iostream> #inc ...
- VUE框架学习——脚手架的搭建
#我的VUE框架学习 题记:初识VUE,觉得VUE十分的不错,故决定去深入的了解学习它,工欲善其事,必先利其器,下面是我搭建vue环境的过程! #一.项目搭建及初始化 1.安装:node.js:去官网 ...
- Xshell查看日志的基础使用
2018\11\26 下载安装不多说,官网免费版即可,附上链接:https://www.netsarang.com/products/xsh_overview.html 打开后新建连接,输入主机ip即 ...
- js闭包实例展示
准确来说,闭包是基于正常的垃圾回收处理机制下的.也就是说,一般情况一个函数(函数作用域)执行完毕,里面声明的变量会全部释放,被垃圾回收器回收.但闭包利用一个技巧,让作用域里面的变量,在函数执行完之后依 ...
- python、js 时间日期模块time
python 参考链接:https://www.runoob.com/python/python-date-time.html 时间戳 >>> print(time.time())# ...
- 【UVA 437】The Tower of Babylon(拓扑排序+DP,做法)
[Solution] 接上一篇,在处理有向无环图的最长链问题的时候,可以在做拓扑排序的同时,一边做DP; 设f[i]表示第i个方块作为最上面的最高值; f[y]=max(f[y],f[x]+h[y]) ...
- HBase为什么快 HBase原理。 HBase几个问题
背景色表示可以自己做实验搞定 1 模拟一组数据 1.2.3.4.5.6.7.8.9.10 1 入 限定符 'one' 2 入 'two' 3 入 'three' 4 f ...