jquery树形表格treetable插件怎么用

JavaScript010

jquery树形表格treetable插件怎么用,第1张

jquery树形表格treetable插件使用方法步骤:

第一步:

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()