Browse Source

docs

master
liurunze 6 years ago
parent
commit
7a6bfbab8a
  1. 5
      README.md
  2. 4
      docs/.vuepress/config.js
  3. 59
      docs/guide/README.md
  4. 92
      docs/guide/data.md
  5. 17
      docs/guide/feature.md
  6. 304
      docs/guide/format.md
  7. BIN
      docs/guide/img/excel.png
  8. 619
      docs/guide/operate.md

5
README.md

@ -4,9 +4,10 @@
Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。
## Features - 特性
1. luckeeysht支持表格设置包括冻结行列、合并单元格、筛选、排序、查询、条件格式、批注
1. Luckysheet支持表格设置包括冻结行列、合并单元格、筛选、排序、查询、条件格式、批注
2. 支持数据分析功能包括透视表、图表、分列、矩阵操作、内置385个计算函数
3. 支持一键截图、复制为json数据、共享编辑、excel与luckysheet之间数据的复制粘贴
3. 支持一键截图、复制为json数据、共享编辑、excel与Luckysheet之间数据的复制粘贴
4. 支持移动端查看
![演示](https://minio.cnbabylon.com/babylon1/public/LuckysheetDemo.gif)
## Documentation - 文档

4
docs/.vuepress/config.js

@ -18,7 +18,9 @@ module.exports = {
'/guide/': [
'',
'config',
'feature'
'feature',
'data',
'operate'
],
},
// 仓库地址

59
docs/guide/README.md

@ -4,11 +4,12 @@
Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。
### 特性
1. luckeeysht支持表格设置包括冻结行列、合并单元格、筛选、排序、查询、条件格式、批注
2. 支持数据分析功能包括透视表、图表、分列、矩阵操作、内置385个计算函数
3. 支持一键截图、复制为json数据、共享编辑、excel与luckysheet之间数据的复制粘贴
1. Luckysheet支持表格设置包括冻结行列、合并单元格、筛选、排序、查询、条件格式、批注
2. 支持数据分析功能包括透视表、分列、矩阵操作、内置385个计算函数
3. 支持一键截图、复制为json数据、共享编辑、excel与Luckysheet之间数据的复制粘贴
4. 支持移动端查看
![演示](https://minio.cnbabylon.com/babylon1/public/Luckysheet_demo.gif)
![演示](https://minio.cnbabylon.com/babylon1/public/LuckysheetDemo.gif)
### Demo
@ -68,4 +69,54 @@ npm run build后dist文件夹下的所有文件复制到项目目录
</script>
```
## 整体结构
### 格式
一个完整的Luckysheet表格文件的数据格式为:jfgridfile,一个表格表格文件包含若干个sheet文件,对应excel的sheet0、sheet1等。
一个Luckysheet文件的示例如下,该表格包含3个sheet:`
jfgridfile = [ {sheet1设置}, {sheet2设置}, {sheet3设置} ]`
相当于excel的3个sheet
![excel sheet](img/excel.png)
文件中的一个sheet的示例如下:
```
jfgridfile[0] =
{
"name": "超市销售额",
"color": "",
"chart": [],
"status": 0,
"order": 0,
"celldata": [],
"row":90,
"column":100,
"index": 0,
"visibledatarow": [],
"visibledatacolumn": [],
"rowsplit": [],
"ch_width": 4629,
"rh_height": 1681,
"jfgird_select_save": {},
"jfgrid_selection_range": {},
"scrollLeft": 0,
"scrollTop": 0,
"load": "1",
"config": {
"columlen": {},
"rowhidden": {}
}
,
"pivotTable": {},
"isPivotTable": true,
"calcChain": [],
"filter":{key1:value1, key2:value2},
"filter_select": {}
}
```
### 查看方式
在chrome的console中查看
`jfgrid.getjfgridfile()`
可以看到完整设置
[{shee1}, {sheet2}, {sheet3}]

92
docs/guide/data.md

@ -0,0 +1,92 @@
# 表格数据
## 获取表格数据
- **配置**
配置 `updateUrl` 的地址,Luckysheet会通过ajax请求表格数据,默认载入status为1的sheet数据中的所有data,其余的sheet载入除data字段外的所有字段。
- **格式**
jfgridfile示例如下:
```json
[
{
"name": "Sheet1",
"color": "",
"status": "1",
"order": "0",
"celldata": [],
"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数据
- **配置**
配置 `loadSheetUrl` 的地址,参数为gridKey(表格主键) 和 index(sheet主键合集,格式为[1,2,3]),返回的数据为sheet的data字段数据集合
- **格式**
```json
{
"1": [{r:0, c:1, v:"值1"},{r:10, c:11, v:"值2"}],
"2": [data],
"3": [data],
}
```
- **说明**
r代表行,c代表列,v代表该单元格的值,值可以是字符、数字或者json串。
数据只会载入一次,一般来说都只有一个主键,但是考虑到一些公式、图表及数据透视表会引用其他sheet的数据,所以前台会加一个判断,如果该当前sheet引用了其他sheet的数据则把引用到的sheet的数据一并补全。
## 获取range范围数据
- **配置**
配置 `loadCellUrl` 的地址,参数为gridKey(表格主键) 、 index(sheet主键)、开始行、结束行、开始列、结束列。后台根据范围获取指定的celldata数据并返回。
## 更新数据
- **配置**
配置 `updateUrl` 的地址,发送到后台的参数为json的字符串。
- **格式**
```json
{
compress: false,
gridKey:10004,
data: [更新数据]
}
```
- **说明**
| 参数 | 说明 | 举例 |
| ------------ | ------------ | ------------ |
| compress | Luckysheet采用客户端pako进行zlib参数压缩,如果浏览器支持压缩则为true,否则为false。后台可以根据此参数决定是否解压data中的内容 | 服务端获取参数过程:1. 序列化json字符串 2判断compress字段如果为TRUE则解压data字段 3. 解码data字符串URLDecoder.decode(utf-8) |
| gridKey | Luckysheet文件的标识符 | 无 |
| data | 一个包含更新数据的数组,数组中的参数格式请看下面的介绍。实例中:t表示更新类型、i为sheet的索引、c为行号、r为列号,v为值 | data: [{ t : 'cell', i:0, c : 0, r : 0 , v: 2 }] |

17
docs/guide/feature.md

@ -1,16 +1,5 @@
# 高级功能
## TODO...
### api
### 创建表格
### 删除表格
### 释放表格
### 复制单元格
### 插入单元格
### 删除单元格
### 编辑器单元格
------------
## jfgrid.getcellvalue(r, c, data, type)
- **参数**
- r:单元格所在行数;可选值;从0开始的整数,0表示第一行。
@ -127,3 +116,9 @@
- **用法**
显示某个表格。
------------
## jfgrid.method.destroy()
- **用法**
释放表格

304
docs/guide/format.md

@ -0,0 +1,304 @@
# 格式属性
## 单元格属性表
<table>
<tr>
<td>属性值</td>
<td>全称</td>
<td>说明</td>
<td>值示例</td>
<td>Aspose方法或者属性</td>
</tr>
<tr>
<td>ct</td>
<td>celltye</td>
<td>单元格值格式:文本、时间等</td>
<td><a href="#cellStyle" target="_blank">单元格格式</a></td>
<td></td>
</tr>
<tr>
<td>bg</td>
<td>background</td>
<td>背景颜色</td>
<td>#fff000</td>
<td>setBackgroundColor</td>
</tr>
<tr>
<td>ff</td>
<td>fontfamily</td>
<td>字体</td>
<td>0 微软雅黑、1 宋体(Song)、2 黑体(ST Heiti)、3 楷体(ST Kaiti)、 4仿宋(ST FangSong)、 5 新宋体(ST Song)、 6 华文新魏、 7华文行楷、 8 华文隶书、 9 Arial、 10 Times New Roman 、11 Tahoma 、12 Verdana</td>
<td>Style.Font object's Name property.</td>
</tr>
<tr>
<td>fc</td>
<td>fontcolor</td>
<td>字体颜色</td>
<td>#fff000</td>
<td>Style.Font object's Color property</td>
</tr>
<tr>
<td>bl</td>
<td>bold</td>
<td>粗体</td>
<td>0 常规 、 1加粗</td>
<td>Style.Font object's IsBold property to true.</td>
</tr>
<tr>
<td>it</td>
<td>italic</td>
<td>斜体</td>
<td>0 常规 、 1 斜体</td>
<td></td>
</tr>
<tr>
<td>fs</td>
<td>fontsize</td>
<td>字体大小</td>
<td>14</td>
<td>Style.Font object's Size property.</td>
</tr>
<tr>
<td>cl</td>
<td>cancelline</td>
<td>删除线</td>
<td>0 常规 、 1 删除线</td>
<td rowspan="2">Style.Font object's Underline property</td>
</tr>
<tr>
<td>ul</td>
<td>underline</td>
<td>下划线</td>
<td>0 常规 、 1 下划线</td>
</tr>
<tr>
<td rowspan="14">bs</td>
<td rowspan="14">borderstyle</td>
<td rowspan="14">边框样式</td>
<td>0 none</td>
<td rowspan="14">LineStyle</td>
</tr>
<tr>
<td>1 Thin</td>
</tr>
<tr>
<td>2 Hair</td>
</tr>
<tr>
<td>3 Dotted</td>
</tr>
<tr>
<td>4 Dashed</td>
</tr>
<tr>
<td>5 DashDot</td>
</tr>
<tr>
<td>6 DashDotDot</td>
</tr>
<tr>
<td>7 Double</td>
</tr>
<tr>
<td>8 Medium</td>
</tr>
<tr>
<td>9 MediumDashed</td>
</tr>
<tr>
<td>10 MediumDashDot</td>
</tr>
<tr>
<td>11 MediumDashDotDot</td>
</tr>
<tr>
<td>12 SlantedDashDot</td>
</tr>
<tr>
<td>13 Thick</td>
</tr>
<tr>
<td>bc</td>
<td>bordercolor</td>
<td>边框颜色</td>
<td>#fff000</td>
<td>setBorderColor</td>
</tr>
<tr>
<td>bs_t</td>
<td>borderstyleTop</td>
<td>上边框样式</td>
<td rowspan="8">同上</td>
<td></td>
</tr>
<tr>
<td>bc_t</td>
<td>bordercolorTop</td>
<td>上边框颜色</td>
<td></td>
</tr>
<tr>
<td>bs_b</td>
<td>borderstyleBottom</td>
<td>下边框样式</td>
<td></td>
</tr>
<tr>
<td>bc_b</td>
<td>bordercolorBottom</td>
<td>下边框颜色</td>
<td></td>
</tr>
<tr>
<td>bs_l</td>
<td>borderstyleLeft</td>
<td>左边框样式</td>
<td></td>
</tr>
<tr>
<td>bc_l</td>
<td>bordercolorLeft</td>
<td>左边框颜色</td>
<td></td>
</tr>
<tr>
<td>bs_r</td>
<td>borderstyleRight</td>
<td>右边框样式</td>
<td></td>
</tr>
<tr>
<td>bc_r</td>
<td>bordercolorRight</td>
<td>右边框颜色</td>
<td></td>
</tr>
<tr>
<td>vt</td>
<td>verticaltype</td>
<td>垂直对齐</td>
<td>0 中间、1 上、2下</td>
<td>setVerticalAlignment</td>
</tr>
<tr>
<td>ht</td>
<td>horizontaltype</td>
<td>水平对齐</td>
<td>0 居中、1 左、2右</td>
<td>setHorizontalAlignment</td>
</tr>
<tr>
<td>mc</td>
<td>mergecell</td>
<td>合并单元格</td>
<td>{ rs: 10, cs:5 } 表示从此cell开始到10行5列的cell进行合并。</td>
<td>Merge</td>
</tr>
<tr>
<td>tr</td>
<td>textrotate</td>
<td>文字旋转</td>
<td>0: 0、1: 45 、2:-45、3 竖排文字、4: 90 、5:-90</td>
<td>setRotationAngle</td>
</tr>
<tr>
<td>fl</td>
<td>floatlenght</td>
<td>小数位数</td>
<td>3</td>
<td></td>
</tr>
<tr>
<td>tb</td>
<td>textbeak</td>
<td>文本换行</td>
<td>0 截断、1溢出、2 自动换行</td>
<td>2:setTextWrapped <br> 0和1:IsTextWrapped =&nbsp;true</td>
</tr>
<tr>
<td>ov</td>
<td>originvalue</td>
<td>原始值</td>
<td></td>
<td></td>
</tr>
<tr>
<td>v</td>
<td>value</td>
<td>显示值</td>
<td></td>
<td></td>
</tr>
<tr>
<td>f</td>
<td>function</td>
<td>公式</td>
<td></td>
<td>setFormula <br> setArrayFormula <br> workbook.calculateFormula();</td>
</tr>
</table>
以下为3个单元格存储:
```
[
{r:0, c:1, v: { v:"显示", f:"=SUM(A2)", bg:"#fff000", bs:"1",bc:"#000"}},
{r:10, c:11, v:"值2"},
{r:10, c:11, v:{f:"=sum", v:"100"}}
]
```
## <div id='cellStyle'>单元格格式</div>
参考https://docs.aspose.com/display/cellsnet/List+of+Supported+Number+Formats#ListofSupportedNumberFormats-Aspose.Cells
格式设置为:`{ v: "" , f: "" ,ct :{ v:1, f: "#,##0.00", t:" Decimal" } }`
|参数|说明|使用|
| ------------ | ------------ | ------------ |
|v|value,Aspose中的快捷设置值|var currencyStyle = book.CreateStyle();<br>currencyStyle.Number = 8;|
|f|Format:格式的定义串 `$#,##0;$-#,##0`|var currencyStyle = book.CreateStyle();<br>currencyStyle.Custom  = "#,##0 SEK";|
|t|Type类型:<br>0:General<br>1:Decimal<br>2:Currency<br>3:Percentage<br>4:Scientific<br>5:Fraction<br>6:Date<br>7:Time<br>8:Accounting<br>9:Text<br>10:DateTime|类型是前端区分的格式,excel导入时根据导入format字符的关键字来区分是哪种类型:<br>1.含YYYY、MM、DD的是6|
Aspose设置如下:
| Value | Type | Format String |
|-------|------------|---------------------------------------------|
| 0 | General | General |
| 1 | Decimal | 0 |
| 2 | Decimal | 0\.00 |
| 3 | Decimal | \#,\#\#0 |
| 4 | Decimal | \#,\#\#0\.00 |
| 5 | Currency | $\#,\#\#0;$\-\#,\#\#0 |
| 6 | Currency | $\#,\#\#0;$\-\#,\#\#0 |
| 7 | Currency | $\#,\#\#0\.00;$\-\#,\#\#0\.00 |
| 8 | Currency | $\#,\#\#0\.00;$\-\#,\#\#0\.00 |
| 9 | Percentage | 0% |
| 10 | Percentage | 0\.00% |
| 11 | Scientific | 0\.00E\+00 |
| 12 | Fraction | \# ?/? |
| 13 | Fraction | \# / |
| 14 | Date | m/d/yy |
| 15 | Date | d\-mmm\-yy |
| 16 | Date | d\-mmm |
| 17 | Date | mmm\-yy |
| 18 | Time | h:mm AM/PM |
| 19 | Time | h:mm:ss AM/PM |
| 20 | Time | h:mm |
| 21 | Time | h:mm:ss |
| 22 | Time | m/d/yy h:mm |
| 37 | Currency | \#,\#\#0;\-\#,\#\#0 |
| 38 | Currency | \#,\#\#0;\-\#,\#\#0 |
| 39 | Currency | \#,\#\#0\.00;\-\#,\#\#0\.00 |
| 40 | Currency | \#,\#\#0\.00;\-\#,\#\#0\.00 |
| 41 | Accounting | \_ \* \#,\#\#0\_ ;\_ \* "\_ ;\_ @\_ |
| 42 | Accounting | \_ $\* \#,\#\#0\_ ;\_ $\* "\_ ;\_ @\_ |
| 43 | Accounting | \_ \* \#,\#\#0\.00\_ ;\_ \* "??\_ ;\_ @\_ |
| 44 | Accounting | \_ $\* \#,\#\#0\.00\_ ;\_ $\* "??\_ ;\_ @\_ |
| 45 | Time | mm:ss |
| 46 | Time | h :mm:ss |
| 47 | Time | mm:ss\.0 |
| 48 | Scientific | \#\#0\.0E\+00 |
| 49 | Text | @ |
导入/导出只用考虑用户看到的数据样式,例如excel中处理日期格式的方式为把日期统一转换为数字:42736 代表 2017-1-1,

BIN
docs/guide/img/excel.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

619
docs/guide/operate.md

@ -0,0 +1,619 @@
# 表格操作
## 单元格刷新
- **格式**
```json
{
"t": "v",
"i": 3,
"v": "asdf",
"r": 5,
"c": 7
}
```
- **说明**
|参数|说明|
| ------------ | ------------ |
|t|操作类型表示符号|
|i|当前sheet的index值|
|v|单元格的值|
|r|单元格的行号|
|c|单元格的列号|
- **后台更新**
单元格更新主要是更新 `jfgridfile[i].celldata` 参数,该参数是一个数组:
```json
[
{r:0, c:1, v: "值1"},
{r:10, c:11, v:"值2"},
{r:10, c:11, v:{f:"=sum", v:"100"}}
]
```
存储了sheet中所有单元格中的值,Luckysheet在建立的时候会根据 `jfgridfile[i].row``jfgridfile[i].column` 的行列数量大小新建一个表格data,然后再使用 `data[r][c]=v` 的方式填充表格数据,空数据单元格以null表示。
后台在保存前台推送的数据时,首先需要把参数转换为 `{r:0, c:1:v:100}` 的格式,然后更新 `jfgridfile[i].celldata` 字段,如果存在该单元格则更新,如果没有则添加,如果存在该单元格但是v为null则删除该单元格。
- **前台查看**
可以修改任意单元格的数值,然后到chrome控制台中查看"t"=="v"的操作。
## config操作
- **格式**
```json
{
"t": "cg",
"i": 3,
"v": {
"7": 192
},
"k": "rowlen"
}
```
- **说明**
|参数|说明|
| ------------ | ------------ |
|t|操作类型表示符号|
|i|当前sheet的index值|
|v|需要更新的内部key-value|
|k|操作的key名称|
- **后台更新**
更新 `jfgridfile[i].config.[k][v.key] = v.value` ,如果config中不存k,则新建一个k属性并设置为空,如果k中不存在v.key中,则新建一个v.key再更新v.value。
1. 修改行高度举例:
- 输入:`{"t":"cg","i":3,"v":{"3":10, "5":70, "10":100},"k":" rowlen"}`
- 更新:`jfgridfile[3].config.["rowlen"]["3"] = 10`
2. 修改列宽度举例:
- 输入:`{"t":"cg","i":1,"v":{"20":74, "15":170, "6":40},"k":" columlen"}`
- 更新:`jfgridfile[1].config.["columlen"]["20"] = 74`
3. 合并单元格举例:
- 输入:`{"t":"cg","i":1,"v":{"5_10":{row:[1,3], column:[3,5]},"k":" merge "}`
- 更新:`jfgridfile[1].config.["merge"]["5_10"] = {row:[1,3], column:[3,5]}`
## 通用保存
- **格式**
```json
{
"t": "all",
"i": 3,
"v": {
"v": 1,
"m":1,
},
"k": "freezen",
"s": false
}
```
- **说明**
|参数|说明|
| ------------ | ------------ |
|t|操作类型表示符号|
|i|当前sheet的index值|
|v|需要更新的内部key-value|
|k|需要保存的key-value中的value|
|s|如果是true则v保存为字符串,否则按照对象进行保存|
- **后台更新**
`jfgridfile[3].[k]= v`
如果s为true,则为 `jfgridfile[3].[k]= JSON.stringify(v)`
1. 数据透视表:
- 输入:`{"t":"all","i":1,"v":{………},"k":"pivotTable", "s": false}`
- 更新:`jfgridfile[1].["pivotTable"] = {………}`
2. 冻结行列:
- 输入:`{"t":"all","i":3,"v":{………},"k":"freezen", "s": false}`
- 更新:`jfgridfile[3].["freezen"] = {………}`
3. 筛选范围:
- 输入:`{"t":"all","i":3,"v":{………},"k":"filter_select", "s": true }`
- 更新:`jfgridfile[3].["filter_select"] = JSON.stringify ({………})`
4. Sheet名称:
- 输入:`{"t":"all","i":1,"v":"文档","k":"name", "s": false}`
- 更新:`jfgridfile[1].["name"] = "文档"`
5. Sheet颜色:
- 输入: `{"t":"all","i":2,"v":"#FFF000","k":"color", "s": false}`
- 更新:`jfgridfile[2].["color"] = "#FFF000"`
## 函数链操作
- **格式**
```json
{
"t": "fc",
"i": 0,
"v": {
"r": 3,
"c": 7,
"index": 0,
"func": [
true,
187282,
"=SUM(E4:G4)"
]
},
"op": "add",
"pos": 0
}
```
- **说明**
|参数|说明|
| ------------ | ------------ |
|t|操作类型表示符号|
|i|当前sheet的index值|
|v|对象值,这里对象的内部字段不需要单独更新,所以存为文本即可|
|op|操作类型,add为新增,update为更新,del为删除|
|pos|更新或者删除的函数位置|
- **后台更新**
calcChain为一个数组
- 如果op的值add则添加到末尾 `jfgridfile[i].calcChain.push (v)`
- 如果op的值update则更新 `jfgridfile[i].calcChain[pos]= v`
- 如果op的值del则删除 `jfgridfile[i].calcChain.splice(pos, 1)`
- **前台查看**
可以修改任意单元格的数值,然后到chrome控制台中查看"t"=="v"的操作。
## 行列操作
### 删除行或列
- **格式**
```json
{
"t": "drc",
"i": 3,
"v": {
"index": 6,
"len": 2
},
"rc": "r"
}
```
- **说明**
<table>
<tr>
<td colspan="2">参数</td>
<td>说明</td>
</tr>
<tr>
<td colspan="2">t</td>
<td>操作类型表示符号</td>
</tr>
<tr>
<td colspan="2">i</td>
<td>当前sheet的index值</td>
</tr>
<tr>
<td colspan="2">rc</td>
<td>行操作还是列操作,值r代表行,c代表列</td>
</tr>
<tr>
<td rowspan="2">v</td>
<td>index</td>
<td>从第几行或者列开始删除</td>
</tr>
<tr>
<td>len</td>
<td>删除多少行或者列</td>
</tr>
</table>
- **后台更新**
如果rc的值是r删除行, 如果rc的值为c则删除列, 例如rc=r,index=4,len=5,则代表从第4行开始删除之后的5行(4、5、6、7、8)。
主要是对 `jfgridfile[i].celldata` 中的单元格进行操作,删除参数中所描述符合条件的单元格并且更新其他单元格的行列值,以上述为例,首先查找单元格中r值在4到8的所有单元格并删除,然后把本来行号9以后的单元格的r值减去5,最后把 `jfgridfile[i].row` 减去5。
如果v值为 `"#__qkdelete#"`(不含引号),则此处为需要删除的单元格。
- **前台查看**
可以删除行或者列,然后到chrome控制台中查看"t"=="drc"的操作。
### 增加行或列
- **格式**
```json
{
"t": "arc",
"i": 0,
"v": {
"index": 5,
"len": 10,
"data": []
},
"rc": "c"
}
```
- **说明**
<table>
<tr>
<td colspan="2">参数</td>
<td>说明</td>
</tr>
<tr>
<td colspan="2">t</td>
<td>操作类型表示符号</td>
</tr>
<tr>
<td colspan="2">i</td>
<td>当前sheet的index值</td>
</tr>
<tr>
<td colspan="2">rc</td>
<td>行操作还是列操作,值r代表行,c代表列</td>
</tr>
<tr>
<td rowspan="3">v</td>
<td>index</td>
<td>从第几行或者列开始新增</td>
</tr>
<tr>
<td>len</td>
<td>增加多少行或者列</td>
</tr>
<tr>
<td>data</td>
<td>新增行或者列的内容</td>
</tr>
</table>
- **后台更新**
如果rc的值是r新增行, 如果rc的值为c则新增列, 例如rc=r,index=4,len=5,则代表从第4行开始增加5行,如果data为空则增加空行,如果data不为空则用data中的数组添加新增的行中。
主要是对 `jfgridfile[i].celldata` 中的单元格进行操作,以上述为例,首先 `jfgridfile[i].row` 加5,然后把r大于4的单元格的整体的r值+5,如果data为空则增加空行则结束,如果data不为空则把二维数组data转换为 `{r:0,c:0,v:100}` 的格式并添加到celldata中,转换的伪代码如下:
```javascript
var ret = [];
for(var r=0;r<data.length;r++){
for(var c=0;c<data[0].length;c++){
if(d[r][c]==null){
continue;
}
ret.push({r:r+5, c:c, v: data[r][c]});
}
}
return ret;
```
- **前台查看**
可以新增行或者列,然后到chrome控制台中查看"t"=="arc"的操作。如果想查看具有data值的操作,则先删除某几行或几列,然后再撤销删除(Ctrl+Z),就能看到。
## 筛选操作
### 选择筛选条件
- **格式**
```json
{
"t": "f",
"i": 0,
"v": "{\"caljs\":{},\"selected\":{\"青岛\":\"1\",\"广西\":\"1\",\"重庆\":\"1\"},\"rowhidden\":{\"1\":0,\"2\":0,\"3\":0,\"4\":0,\"6\":0,\"7\":0,\"8\":0,\"9\":0,\"10\":0,\"11\":0,\"12\":0,\"13\":0,\"14\":0,\"15\":0,\"16\":0,\"17\":0,\"18\":0,\"19\":0,\"21\":0,\"22\":0,\"24\":0,\"25\":0,\"26\":0,\"27\":0,\"28\":0,\"29\":0,\"30\":0,\"31\":0,\"32\":0,\"33\":0,\"34\":0,\"35\":0}}",
"op": "upOrAdd",
"pos": 1
}
```
- **说明**
|参数|说明|
| ------------ | ------------ |
|t|操作类型表示符号|
|i|当前sheet的index值|
|v|对象值,这里对象的内部字段不需要单独更新,所以存为文本即可|
|op|操作类型upOrAdd为更新,如果不存在则增加,del为删除|
|pos|更新或者删除的option位置|
- **后台更新**
更新 `jfgridfile[i].filter = { pos : v }`, v值为一个JSON格式的字符串。filter为一个键值对,key表示选项位置的索引值(以字符表示),v表示一个json字符串参数。filter代表一个筛选条件的集合。
### 清除筛选
- **格式**
```json
{
"t": "fsc",
"i": 0,
"v": null
}
```
- **后台更新**
清除 `jfgridfile[i]. filter = null``jfgridfile[i]. filter_select = null`
### 恢复筛选
- **格式**
```json
{
"t": "fsr",
"i": 0,
"v": {
"filter": [],
"filter_select": {}
}
}
```
- **后台更新**
清除 `jfgridfile[i]. filter = v.filter``jfgridfile[i]. filter_select = v. filter_select`
## sheet操作
### 新建sheet
- **格式**
```json
{
"t": "sha",
"i": null,
"v": {
"name": "Sheet4",
"color": "",
"status": "0",
"order": 3,
"index": 3,
"data": [],
"config": {},
"pivotTable": null,
"isPivotTable": false
}
}
```
- **说明**
<table>
<tr>
<td colspan="2">参数</td>
<td>说明</td>
</tr>
<tr>
<td colspan="2">t</td>
<td>操作类型表示符号</td>
</tr>
<tr>
<td colspan="2">i</td>
<td>当前sheet的index值</td>
</tr>
<tr>
<td rowspan="9">v</td>
<td>name</td>
<td>隐藏后跳转的sheet的index值</td>
</tr>
<tr>
<td>color</td>
<td>Sheet颜色</td>
</tr>
<tr>
<td>status</td>
<td>激活状态</td>
</tr>
<tr>
<td>order</td>
<td>Sheet摆放顺序</td>
</tr>
<tr>
<td>index</td>
<td>Index索引</td>
</tr>
<tr>
<td>celldata</td>
<td>单元格数据集</td>
</tr>
<tr>
<td>config</td>
<td>设置</td>
</tr>
<tr>
<td>pivotTable</td>
<td>数据透视表设置</td>
</tr>
<tr>
<td>isPivotTable</td>
<td>是否数据透视表</td>
</tr>
</table>
- **后台更新**
添加一行(一个文档)到数据库中。
### 复制sheet
- **格式**
```json
{
"t": "shc",
"i": "新建sheet的位置",
"v": {
"copyindex": "copyindex"
}
}
```
- **后台更新**
复制表格中的sheet索引值为copyindex并添加到数据库中,添加的设置该新文档的index为i对应的值。
### 删除sheet
- **格式**
```json
{
"t": "shd",
"i": null,
"v": {
"deleIndex": 0
}
}
```
- **说明**
<table>
<tr>
<td colspan="2">参数</td>
<td>说明</td>
</tr>
<tr>
<td colspan="2">t</td>
<td>操作类型表示符号</td>
</tr>
<tr>
<td rowspan="2">v</td>
<td>deleIndex</td>
<td>需要删除的sheet索引</td>
</tr>
</table>
- **后台更新**
删除索引为deleIndex对应值得sheet。
### 位置
- **格式**
```json
{
"t": "shr",
"v": {
"index": "positon"
}
}
```
- **说明**
|参数|说明|
| ------------ | ------------ |
|t|操作类型表示符号|
|v|设置Sheet的排序,为一个键值对,key代表sheet的index,value代表order值。格式为:`{"1": 3, "2":1, "0": 2, "3":0}|
- **后台更新**
对sheet的index等于key的页设置其order属性为value值。示例:
`jfgridfile[key1].order = value1`
`jfgridfile[key2].order = value2`
`jfgridfile[key3].order = value3`
## sheet属性(隐藏或显示)
- **格式**
```json
{
"t": "sh",
"i": 0,
"v": 1,
"op": " hide",
"cur": 2
}
```
- **说明**
|参数|说明|
| ------------ | ------------ |
|t|操作类型表示符号|
|i|当前sheet的index值|
|op|操作选项,有hide、show。|
|v|如果hide为1则隐藏,为0或者空则为显示|
|cur|隐藏后设置索引对应cur的sheet为激活状态。|
- **后台更新**
更新"i"对应sheet的根路径hide字段为v,当隐藏时status值为0,当显示时为1, 如果为隐藏则更新index对应cur的sheet的status状态为1。
## 表格信息更改
### 表格名称
- **格式**
```json
{
"t": "na",
"i": null,
"v": "数据"
}
```
- **说明**
|参数|说明|
| ------------ | ------------ |
|t|操作类型表示符号|
|v|表格的名称|
- **后台更新**
根据gridkey更新数据库中的表格名称。
### 缩略图
- **格式**
```json
{
"t": "thumb",
"img": "base64",
"curindex": "curindx"
}
```
- **说明**
|参数|说明|
| ------------ | ------------ |
|t|操作类型表示符号|
|img|当前表格的缩略图,为base64字符串|
|curindex|当前表格默认打开的sheet|
- **后台更新**
根据gridkey更新mysql中表格的缩略图字段为img值,同时更新index为curindex值的sheet的status字段为1,设置其他sheet的status值为0。
Loading…
Cancel
Save