lrz
5 years ago
9 changed files with 369 additions and 237 deletions
@ -1,4 +1,5 @@ |
|||
.DS_Store |
|||
node_modules |
|||
package-lock.json |
|||
dist |
|||
dist |
|||
docs/.vuepress/dist |
|||
@ -0,0 +1,31 @@ |
|||
module.exports = { |
|||
title: 'Luckysheet文档', |
|||
description: 'Luckysheet 配置文档/API/教程', |
|||
base: '/LuckysheetDocs/', |
|||
themeConfig: { |
|||
logo: '/img/logo.png', |
|||
// 页面滚动
|
|||
smoothScroll: true, |
|||
// 导航栏
|
|||
nav: [ |
|||
{ text: '首页', link: '/' }, |
|||
{ text: '指南', link: '/guide/' }, |
|||
{ text: '演示', link: 'https://mengshukeji.github.io/LuckysheetDemo/' }, |
|||
{ text: 'Github', link: 'https://github.com/mengshukeji/Luckysheet' }, |
|||
], |
|||
// 侧边栏
|
|||
sidebar: { |
|||
'/guide/': [ |
|||
'', |
|||
'config', |
|||
'feature' |
|||
], |
|||
}, |
|||
// 仓库地址
|
|||
repo: 'mengshukeji/Luckysheet', |
|||
// 仓库链接文字
|
|||
repoLabel: '在 GitHub 上编辑此页', |
|||
// 仓库的文档目录
|
|||
docsDir: 'docs', |
|||
}, |
|||
} |
|||
|
After Width: | Height: | Size: 6.2 KiB |
@ -0,0 +1,15 @@ |
|||
--- |
|||
home: true |
|||
heroText: Luckysheet |
|||
tagline: Luckysheet 配置文档/API/教程 |
|||
actionText: 快速上手 → |
|||
actionLink: /guide/ |
|||
features: |
|||
- title: 功能强大 |
|||
details: 包含大量常用电子表格功能,替代你的excel |
|||
- title: 配置简单 |
|||
details: 最少的配置就能开始上手使用 |
|||
- title: 完全开源 |
|||
details: 社区驱动,共同来完善你的想法 |
|||
footer: MIT Licensed | Copyright © 2020-present Mengshukeji |
|||
--- |
|||
@ -0,0 +1,71 @@ |
|||
# 快速上手 |
|||
|
|||
## 基本介绍 |
|||
Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。 |
|||
|
|||
### 特性 |
|||
1. luckeeysht支持表格设置包括冻结行列、合并单元格、筛选、排序、查询、条件格式、批注 |
|||
2. 支持数据分析功能包括透视表、图表、分列、矩阵操作、内置385个计算函数 |
|||
3. 支持一键截图、复制为json数据、共享编辑、excel与luckysheet之间数据的复制粘贴 |
|||
|
|||
 |
|||
|
|||
|
|||
### Demo |
|||
[在线demo](https://mengshukeji.github.io/LuckysheetDemo/) |
|||
|
|||
## 开发模式 |
|||
|
|||
### 环境 |
|||
[Node.js](https://nodejs.org/en/) Version >= 6 |
|||
|
|||
### 安装 |
|||
```shell |
|||
npm install |
|||
npm install gulp -g |
|||
``` |
|||
|
|||
### 开发 |
|||
```shell |
|||
npm run dev |
|||
``` |
|||
|
|||
### 打包 |
|||
```shell |
|||
npm run build |
|||
``` |
|||
|
|||
## 使用步骤 |
|||
|
|||
### 第一步 |
|||
npm run build后dist文件夹下的所有文件复制到项目目录 |
|||
|
|||
### 第二步 |
|||
引入依赖 |
|||
```html |
|||
<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> |
|||
``` |
|||
### 第三步 |
|||
指定一个表格容器 |
|||
```html |
|||
<div id="jfgrid" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div> |
|||
``` |
|||
### 第四步 |
|||
创建一个表格 |
|||
```javascript |
|||
<script> |
|||
$(function () { |
|||
//配置项 |
|||
var options = { |
|||
container: 'jfgrid' //jfgrid为容器id |
|||
} |
|||
jfgrid.create(options) |
|||
}) |
|||
</script> |
|||
``` |
|||
|
|||
|
|||
@ -0,0 +1,232 @@ |
|||
# 基本配置 |
|||
|
|||
## container |
|||
- 类型：String |
|||
- 默认值："jfgrid" |
|||
- 作用：容器的ID |
|||
|
|||
------------ |
|||
## title |
|||
- 类型：String |
|||
- 默认值："Luckysheet Demo" |
|||
- 作用：表格的名称 |
|||
|
|||
------------ |
|||
## column |
|||
- 类型：Number |
|||
- 默认值：60 |
|||
- 作用：空表格默认的列数量 |
|||
|
|||
------------ |
|||
## row |
|||
- 类型：Number |
|||
- 默认值：84 |
|||
- 作用：空表格默认的行数据量 |
|||
|
|||
------------ |
|||
## data |
|||
- 类型：Array |
|||
- 默认值：[{ "name": "Sheet1", color: "", "status": "1", "order": "0", "data": [], "config": {}, "index":0 }, { "name": "Sheet2", color: "", "status": "0", "order": "1", "data": [], "config": {}, "index":1 }, { "name": "Sheet3", color: "", "status": "0", "order": "2", "data": [], "config": {}, "index":2 }] |
|||
- 作用：客户端sheet数据[shee1, sheet2, sheet3] |
|||
|
|||
------------ |
|||
|
|||
## fullscreenmode |
|||
- 类型：Boolean |
|||
- 默认值：true |
|||
- 作用：是否全屏模式，非全屏模式下，标记框不会强制选中。 |
|||
|
|||
------------ |
|||
## autoFormatw |
|||
- 类型：Boolean |
|||
- 默认值：false |
|||
- 作用：自动格式化超过4位数的数字为 亿万格式 例：true or "true" or "TRUE" |
|||
|
|||
------------ |
|||
## accuracy |
|||
- 类型：Number |
|||
- 默认值：undefined |
|||
- 作用：设置传输来的数值的精确位数，小数点后n位 传参数为数字或数字字符串，例： "0" 或 0 |
|||
|
|||
------------ |
|||
## allowCopy |
|||
- 类型：Boolean |
|||
- 默认值：true |
|||
- 作用：是否允许拷贝 |
|||
|
|||
------------ |
|||
## showtoolbar |
|||
- 类型：Boolean |
|||
- 默认值：true |
|||
- 作用：是否第二列显示工具栏 |
|||
|
|||
------------ |
|||
## showinfobar |
|||
- 类型：Boolean |
|||
- 默认值：true |
|||
- 作用：是否显示顶部名称栏 |
|||
|
|||
------------ |
|||
## showsheetbar |
|||
- 类型：Boolean |
|||
- 默认值：true |
|||
- 作用：是否显示底部表格名称区域 |
|||
|
|||
------------ |
|||
|
|||
## showstatisticBar |
|||
- 类型：Boolean |
|||
- 默认值：true |
|||
- 作用：是否显示底部计数栏 |
|||
|
|||
------------ |
|||
## editMode |
|||
- 类型：Boolean |
|||
- 默认值：false |
|||
- 作用：是否为编辑模式 |
|||
|
|||
------------ |
|||
## allowEdit |
|||
- 类型：Boolean |
|||
- 默认值：true |
|||
- 作用：是否允许前台编辑 |
|||
|
|||
------------ |
|||
## enableAddRow |
|||
- 类型：Boolean |
|||
- 默认值：true |
|||
- 作用：允许增加行 |
|||
|
|||
------------ |
|||
## enableAddCol |
|||
- 类型：Boolean |
|||
- 默认值：true |
|||
- 作用：允许增加列 |
|||
|
|||
------------ |
|||
## pointEdit |
|||
- 类型：Boolean |
|||
- 默认值：false |
|||
- 作用：是否是编辑器插入表格模式 |
|||
|
|||
------------ |
|||
## pointEditUpdate |
|||
- 类型：Function |
|||
- 默认值：null |
|||
- 作用：编辑器表格更新函数 |
|||
|
|||
------------ |
|||
## pointEditZoom |
|||
- 类型：Number |
|||
- 默认值：1 |
|||
- 作用：编辑器表格编辑时缩放比例 |
|||
|
|||
------------ |
|||
## pointEditZoom |
|||
- 类型：Number |
|||
- 默认值：1 |
|||
- 作用：编辑器表格编辑时缩放比例 |
|||
|
|||
------------ |
|||
## userInfo |
|||
- 类型：String |
|||
- 默认值：`'<i style="font-size:16px;color:#ff6a00;" class="fa fa-taxi" aria-hidden="true"></i> rabbit'` |
|||
- 作用：右上角的用户信息展示样式 |
|||
|
|||
------------ |
|||
## userMenuItem |
|||
- 类型：Array |
|||
- 默认值：`[{url:"www.baidu.com", "icon":'<i class="fa fa-folder" aria-hidden="true"></i>', "name":"我的表格"}, {url:"www.baidu.com", "icon":'<i class="fa fa-sign-out" aria-hidden="true"></i>', "name":"退出登陆"}]` |
|||
- 作用：点击右上角的用户信息弹出的菜单 |
|||
|
|||
------------ |
|||
## myFolderUrl |
|||
- 类型：String |
|||
- 默认值："www.baidu.com" |
|||
- 作用：左上角<返回按钮的链接 |
|||
|
|||
------------ |
|||
## config |
|||
- 类型：Object |
|||
- 默认值：{} |
|||
- 作用：表格行高、列宽、合并单元格、公式等设置 |
|||
|
|||
------------ |
|||
## devicePixelRatio |
|||
- 类型：Number |
|||
- 默认值：window.devicePixelRatio |
|||
- 作用：设备比例，比例越大表格分标率越高 |
|||
|
|||
------------ |
|||
## gridKey |
|||
- 类型：String |
|||
- 默认值："" |
|||
- 作用：表格唯一标识符 |
|||
|
|||
------------ |
|||
## loadUrl |
|||
- 类型：String |
|||
- 默认值："" |
|||
- 作用：配置loadUrl的地址，luckysheet会通过ajax请求表格数据，默认载入status为1的sheet数据中的所有data，其余的sheet载入除data字段外的所有字段 |
|||
|
|||
------------ |
|||
## loadSheetUrl |
|||
- 类型：String |
|||
- 默认值："" |
|||
- 作用：配置loadSheetUrl的地址，参数为gridKey（表格主键） 和 index（sheet主键合集，格式为[1,2,3]），返回的数据为sheet的data字段数据集合 |
|||
|
|||
------------ |
|||
## updateUrl |
|||
- 类型：String |
|||
- 默认值："" |
|||
- 作用：表格数据的更新地址 |
|||
|
|||
------------ |
|||
## updateImageUrl |
|||
- 类型：String |
|||
- 默认值："" |
|||
- 作用：缩略图的更新地址 |
|||
|
|||
------------ |
|||
## allowUpdate |
|||
- 类型：Boolean |
|||
- 默认值：false |
|||
- 作用：是否允许编辑后的后台更新 |
|||
|
|||
------------ |
|||
## functionButton |
|||
- 类型：String |
|||
- 默认值："" |
|||
- 作用：右上角功能按钮，例如`'<button id="" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;">下载</button> <button id="" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">分享</button> <button id="jfgrid-share-btn-title" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">秀数据</button>'` |
|||
|
|||
------------ |
|||
## showConfigWindowResize |
|||
- 类型：Boolean |
|||
- 默认值：true |
|||
- 作用：图表和数据透视表的配置会在右侧弹出，设置弹出后表格是否会自动缩进 |
|||
|
|||
------------ |
|||
## enablePage |
|||
- 类型：Boolean |
|||
- 默认值：false |
|||
- 作用：允许加载下一页 |
|||
|
|||
------------ |
|||
## chartConfigChange |
|||
- 类型：Function |
|||
- 默认值：null |
|||
- 作用：图表插件中图表更新触发的自定义方法 |
|||
|
|||
------------ |
|||
## beforeCreateDom |
|||
- 类型：Function |
|||
- 默认值：null |
|||
- 作用：表格创建之前自定义方法 |
|||
|
|||
------------ |
|||
## fireMousedown |
|||
- 类型：Function |
|||
- 默认值：null |
|||
- 作用：单元格数据下钻自定义方法 |
|||
|
|||
------------ |
|||
@ -0,0 +1,11 @@ |
|||
# 高级功能 |
|||
|
|||
## TODO... |
|||
### api |
|||
### 创建表格 |
|||
### 删除表格 |
|||
### 释放表格 |
|||
### 复制单元格 |
|||
### 插入单元格 |
|||
### 删除单元格 |
|||
### 编辑器单元格 |
|||
Loading…
Reference in new issue