一个不错的纯Javascript电子表格插件Luckysheet

所属分类:UI-图表

 18436  222  查看评论 (11)
分享到微信朋友圈
X
一个不错的纯Javascript电子表格插件Luckysheet ie兼容9

更新时间:2020-06-07 22:14:21

Luckysheet

基本介绍

Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。

特性

  • Luckysheet支持表格设置包括冻结行列、合并单元格、筛选、排序、查询、条件格式、批注

  • 支持数据分析功能包括透视表、分列、矩阵操作、内置385个计算函数

  • 支持一键截图、复制为json数据、共享编辑、excel与Luckysheet之间数据的复制粘贴

  • 支持移动端查看

开发模式

#环境

Node.js Version >= 6

#安装

npm install
npm install gulp -g

#开发

npm run dev

#打包

npm run build

使用步骤

第一步

npm run build后dist文件夹下的所有文件复制到项目目录

第二步

引入依赖

<link rel="stylesheet" href="plugins/css/pluginsCss.min.css">
<link rel="stylesheet" href="plugins/plugins.min.css">
<link rel="stylesheet" href="css/main.min.css">
<script src="plugins/js/plugin.min.js"></script>
<script src="main.min.js"></script>

第三步

指定一个表格容器

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>

第四步

创建一个表格

<script>
    $(function () {
        //配置项
        var options = {
            container: 'luckysheet' //luckysheet为容器id
        }
        luckysheet.create(options)
    })
</script>

整体结构

格式

一个完整的Luckysheet表格文件的数据格式为:luckysheetfile,一个表格表格文件包含若干个sheet文件,对应excel的sheet0、sheet1等。

一个Luckysheet文件的示例如下,该表格包含3个sheet:luckysheetfile = [ {sheet1设置}, {sheet2设置}, {sheet3设置} ] 相当于excel的3个sheet excel sheet

excel.png

文件中的一个sheet的示例如下:

luckysheetfile[0] = 
{
"name": "超市销售额",
"color": "",
"chart": [],
"status": 0,
"order": 0,
"celldata": [],
"row":90,
"column":100,
"index": 0,
"visibledatarow": [],
"visibledatacolumn": [],
"rowsplit": [],
"ch_width": 4629,
"rh_height": 1681,
"luckysheet_select_save": {},
"luckysheet_selection_range": {},
"scrollLeft": 0,
"scrollTop": 0,
"load": "1",
"config": {
"columlen": {},
"rowhidden": {}
}
,
"pivotTable": {},
"isPivotTable": true,
    "calcChain": [],
    "filter":{key1:value1, key2:value2},
    "filter_select": {}
}

查看方式

在chrome的console中查看 luckysheet.getluckysheetfile() 可以看到完整设置 [{shee1}, {sheet2}, {sheet3}]

相关插件-图表

抖音业绩销量动态排行,加载数据实现动态排名

git上的部分项目改造,根据自己的需求可以自行进行修改。一般用于大屏演示和数据展示
  图表
 14109  137

jquery-html5关系图

jquery-html关系图-介绍人物关系
  图表
 125591  462

ets实现汽车动态仪表盘

通过ets实现汽车动态仪表盘,包括速度,转速等的实时数据更新
  图表
 17053  207

jquery_html5_图表

jquery_html5_图表
  图表
 38253  367

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    一寸光阴一寸心 0
    2021/9/6 16:55:01
    大神,下拉框选择某项怎么实现啊?求指教,困扰很久了~ 回复
    liweifan 0
    2021/6/30 9:23:26
    请问jquery能用吗 回复
    lijek800c 0
    2021/1/29 14:28:58
    Charles 意 0
    2020/7/31 10:00:52
    可以将样式转化为json格式传给后台吗 回复
    ¥%¥%¥ 0
    2020/7/30 10:09:24
    大佬,有vue使用文档么,集成到vue项目,启动报错了 回复
    老大不小了 0
    2020/7/3 10:00:48
    什么时候能支持npm啊,react vue要怎么用呢
        Alexads0
        2020/7/22 12:31:19

        模块化正在进行中,近期会推出npm安装版本.欢迎关注github的更新
        https://github.com/mengshukeji/Luckysheet
        react/vue的案例后续会在官网给出教程,暂时只能自己搭建

    回复
    areyouOk 0
    2020/6/9 11:56:08

    太牛逼了。 要的就是你

    回复
    wbfsa 0
    2020/6/8 16:17:36
    功能很全啊
        Alexads0
        2020/6/9 10:38:56
        欢迎试用反馈
        waking0
        2020/7/20 15:32:39
        怎么联系您反馈问题?
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复