第一步:
1.上官网下载。
2.插件引用,当下载的时候,会有很多个文件,但是根据api来看,如果只想做简单的效果,js除了引用juquery外,只需要引用jquery.treetable.js插件,如果想让它有默认的外观样式还需要引入它们的jquery.treetable.css和jquery.treetable.theme.default.css
第二步:建立table格式
<table id="example-advanced">
<tr data-tt-id="1">
<td>大家电</td>
</tr>
<tr data-tt-id="2" data-tt-parent-id="1">
<td>---电视</td>
</tr>
<tr data-tt-id="3" data-tt-parent-id="1">
<td>---洗衣机</td>
</tr>
<tr data-tt-id="4" data-tt-parent-id="1">
<td>---冰箱</td>
</tr>
</table>
第三步:引入JS
/* 初始化数据 */
$("#example-advanced").treetable({ expandable: true })/* 高亮显示 */$("#example-advanced tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected")
$(this).toggleClass("selected")
})/* 点击展开&&关闭 */<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('expandAll')return false">展开</a>
<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('collapseAll')return false">关闭l</a>
简单的办法:使用js生成一个table,可以直接复制到excel中,网上有很多表格插件。
复杂的办法:js传递数据到服务器,服务器生成表格后返回一个下载链接。
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
在1995年时,由Netscape公司的BrendanEich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。
MicrosoftExcel是微软公司的办公软件Microsoftoffice的组件之一,是由Microsoft为Windows和AppleMacintosh操作系统的电脑而编写和运行的一款试算表软件。Excel是微软办公套装软件的一个重要的组成部分,它可以进行各种数据的处理、统计分析和辅助决策操作,广泛地应用于管理、统计财经、金融等众多领域。
sortable.js 官网
拖放排序插件Sortable.js中文介绍
1. 安装 npm 或 yarn 安装
2. 使用
效果:
3. 小结
事件:
onChoose :function 列表单元被选中的回调函数
onStart :function 列表单元拖动开始的回调函数
onEnd :function 列表单元拖放结束后的回调函数
onAdd :function 列表单元添加到本列表容器的回调函数
onUpdate :function 列表单元在列表容器中的排序发生变化后的回调函数
onRemove :function 列表元素移到另一个列表容器的回调函数
onFilter :function 试图选中一个被filter过滤的列表单元的回调函数
onMove :function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数
onClone :function 当创建一个列表单元副本的时候的回调函数
事件对象:
to :HTMLElement--移动到列表容器
from :HTMLElement--来源的列表容器
item :HTMLElement--被移动的列表单元
clone :HTMLElement--副本的列表单元
oldIndex :number/undefined--在列表容器中的原序号
newIndex :number/undefined--在列表容器中的新序号
方法
option(name[,value])
获得或者设置项参数,使用方法类似于jQuery用法,没有第二个参数为获得option中第一个参数所对应的值,有第二个参数时,将重新赋给第一个参数所对应的值;
toArray()
序列化可排序的列表单元的data-id(可通过配置项中dataIdAttr修改)放入一个数组,并返回这个数组中
sort()
通过自定义列表单元的data-id的数组对列表单元进行排序
save()
destroy()