diff --git a/.gitignore b/.gitignore index cdfa3cc..ab4b17f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .DS_Store node_modules package-lock.json -dist \ No newline at end of file +dist +docs/.vuepress/dist \ No newline at end of file diff --git a/README.md b/README.md index 25a4697..98eb56e 100644 --- a/README.md +++ b/README.md @@ -12,9 +12,9 @@ Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置 ## Documentation - 文档 -[在线demo](https://luckysheet.office2.cn/examples/) coming soon! +[在线demo](https://mengshukeji.github.io/LuckysheetDemo/) -[在线文档](https://luckysheet.office2.cn/docs/) coming soon! +[在线文档](https://mengshukeji.github.io/LuckysheetDocs/) ## Requirements - 环境 [Node.js](https://nodejs.org/en/) Version >= 6 @@ -67,238 +67,6 @@ npm run build后dist文件夹下的所有文件复制到项目目录 }) ``` -## Basic Configuration - 基本配置项 - -### 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 -- 默认值：`' rabbit'` -- 作用：右上角的用户信息展示样式 - ------------- -### userMenuItem -- 类型：Array -- 默认值：`[{url:"www.baidu.com", "icon":'', "name":"我的表格"}, {url:"www.baidu.com", "icon":'', "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 -- 默认值："" -- 作用：右上角功能按钮，例如`' '` - ------------- -### showConfigWindowResize -- 类型：Boolean -- 默认值：true -- 作用：图表和数据透视表的配置会在右侧弹出，设置弹出后表格是否会自动缩进 - ------------- -### enablePage -- 类型：Boolean -- 默认值：false -- 作用：允许加载下一页 - ------------- -### chartConfigChange -- 类型：Function -- 默认值：null -- 作用：图表插件中图表更新触发的自定义方法 - ------------- -### beforeCreateDom -- 类型：Function -- 默认值：null -- 作用：表格创建之前自定义方法 - ------------- -### fireMousedown -- 类型：Function -- 默认值：null -- 作用：单元格数据下钻自定义方法 - ------------- ## Contact - 联系 mengshu@office2.cn diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js new file mode 100644 index 0000000..c229799 --- /dev/null +++ b/docs/.vuepress/config.js @@ -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', + }, +} \ No newline at end of file diff --git a/docs/.vuepress/public/img/logo.png b/docs/.vuepress/public/img/logo.png new file mode 100644 index 0000000..4f0a5e9 Binary files /dev/null and b/docs/.vuepress/public/img/logo.png differ diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..28ebb33 --- /dev/null +++ b/docs/README.md @@ -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 +--- \ No newline at end of file diff --git a/docs/guide/README.md b/docs/guide/README.md new file mode 100644 index 0000000..6ef47df --- /dev/null +++ b/docs/guide/README.md @@ -0,0 +1,71 @@ +# 快速上手 + +## 基本介绍 +Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。 + +### 特性 +1. luckeeysht支持表格设置包括冻结行列、合并单元格、筛选、排序、查询、条件格式、批注 +2. 支持数据分析功能包括透视表、图表、分列、矩阵操作、内置385个计算函数 +3. 支持一键截图、复制为json数据、共享编辑、excel与luckysheet之间数据的复制粘贴 + +![演示](https://minio.cnbabylon.com/babylon1/public/Luckysheet_demo.gif) + + +### 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 + + + + + +``` +### 第三步 +指定一个表格容器 +```html +
+``` +### 第四步 +创建一个表格 +```javascript + +``` + + diff --git a/docs/guide/config.md b/docs/guide/config.md new file mode 100644 index 0000000..9e2dc6a --- /dev/null +++ b/docs/guide/config.md @@ -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 +- 默认值：`' rabbit'` +- 作用：右上角的用户信息展示样式 + +------------ +## userMenuItem +- 类型：Array +- 默认值：`[{url:"www.baidu.com", "icon":'', "name":"我的表格"}, {url:"www.baidu.com", "icon":'', "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 +- 默认值："" +- 作用：右上角功能按钮，例如`' '` + +------------ +## showConfigWindowResize +- 类型：Boolean +- 默认值：true +- 作用：图表和数据透视表的配置会在右侧弹出，设置弹出后表格是否会自动缩进 + +------------ +## enablePage +- 类型：Boolean +- 默认值：false +- 作用：允许加载下一页 + +------------ +## chartConfigChange +- 类型：Function +- 默认值：null +- 作用：图表插件中图表更新触发的自定义方法 + +------------ +## beforeCreateDom +- 类型：Function +- 默认值：null +- 作用：表格创建之前自定义方法 + +------------ +## fireMousedown +- 类型：Function +- 默认值：null +- 作用：单元格数据下钻自定义方法 + +------------ \ No newline at end of file diff --git a/docs/guide/feature.md b/docs/guide/feature.md new file mode 100644 index 0000000..d294170 --- /dev/null +++ b/docs/guide/feature.md @@ -0,0 +1,11 @@ +# 高级功能 + +## TODO... +### api +### 创建表格 +### 删除表格 +### 释放表格 +### 复制单元格 +### 插入单元格 +### 删除单元格 +### 编辑器单元格 \ No newline at end of file diff --git a/package.json b/package.json index bd6647b..e35267a 100644 --- a/package.json +++ b/package.json @@ -11,12 +11,15 @@ "gulp-clean-css": "^4.3.0", "gulp-if": "^3.0.0", "gulp-uglify": "^3.0.2", - "gulp-useref": "^4.0.1" + "gulp-useref": "^4.0.1", + "vuepress": "^1.5.0" }, "dependencies": {}, "scripts": { "build": "gulp build", - "dev": "gulp dev" + "dev": "gulp dev", + "docs:dev": "vuepress dev docs", + "docs:build": "vuepress build docs" }, "files": [ "dist"