Luckysheet源码分析之4-页面加载过程

返回目录

1. core入口

实现的位置在 sheetmanage.js

sheetmanage.initialjfFile(menu, title);
1

2. sheetmanage.initialjfFile()

2.1. 获取当前Sheet数据到file

_this.getCurSheet(); //Line585
let file = Store.luckysheetfile[_this.getSheetIndex(Store.currentSheetIndex)];
1
2

首先，获取当前的sheet，并把相应数据存放到file变量，Store.luckysheetfile 的数据怎么来的呢？跟踪core.js, 可以通过URL获得(Line114-115)，也可以通过 extendsetting (Line38)获得，extendsetting来源于 index.html定义的 一堆 ./demoData下面的 .js文件

2.2. 提取file到data

 let data = _this.buildGridData(file);
1

查看data是双重数组，第一层为行，第二层为列，数据结构与 ./demoData下面的 .js文件一致

2.3.创建元素

luckysheetcreatedom(colwidth, rowheight, data, menu, title);
1

函数定义在createdom.js, 几个参数前面三个，都是从URL或者File得到，前两个分别是行列的长度，后面两个menu和title从./config.js或者 创建表格参数而来。
这个函数其实就是处理gh这个变量，从constant.js拿到模板后，通过 replaceHtml()函数不断修正 gh，最后通过 下面这句话完成界面。

$("#" + Store.container).append(gh);
```j


### 2.3.1. 构造HTML元素
```javascript
let gh = gridHTML(); // createdom.js Line34
1
2
3
4
5
6
7

函数定义在constant.js，直接返回一个超级大的string，分解后主要有下面几个部分：

2.3.1.1. luckysheet_info_detail 标题栏

luckysheet_info_detail_title
luckysheet_info_detail_input
luckysheet_info_detail_update
luckysheet_info_detail_save
luckysheet_info_detail_user

2.3.1.2. luckysheet-wa-editor 菜单栏

对应${menu}参数，在后面会通过replace的方式赋值

2.3.1.3. luckysheet-wa-calculate 计算公式

luckysheet-wa-calculate-size 表格选择区域
luckysheet-wa-calculate-help 这个下拉框demo里面没有具体
luckysheet-wa-functionbox-cancel 取消公式
luckysheet-wa-functionbox-confirm 确认公式
luckysheet-wa-functionbox-fx 弹出公式对话框
luckysheet-functionbox-container 手工输入公式框

2.3.1.4. luckysheet-grid-window-1 数据编辑区域

这个区域实际是一个table，包括 行标题定义 $columnHeader、列标题定义${rowHeader}

2.3.1.5. luckysheet-sheet-area 工作表选项

luckysheet-sheets-add 新增sheet
luckysheet-sheets-m sheet选单
luckysheet-sheet-container sheet
luckysheet-sheet-container-c
luckysheet-sheets-leftscroll
luckysheet-sheets-rightscroll

2.3.2. 填充数据

editor.webWorkerFlowDataCache(Store.flowdata);// createdom.js Line54
1

这里的Store.flowdata 就是上面准备好的 data（每一个单元格的填充信息），editor.js的作用以后再进一步分析

2.3.3. 填充 Store.container

上面构造出的gh，注入到container里面

$("#" + Store.container).append(gh);
1

2.3.4. 设置滚动条的宽高

    $("#luckysheet-scrollbar-x div").width(Store.ch_width);
    $("#luckysheet-scrollbar-y div").height(Store.rh_height - 30);
1
2

2.3.5. 填充页面body元素

2.3.5.1. 添加fx对话框

luckysheet-modal-dialog-mask

$("body").append(maskHTML);
$("body").append(colsmenuHTML); //NULL  不知道预留做啥用
1
2

2.3.5.2. 单元格的鼠标右键元素

$("body").append(rightclickHTML());
1

2.3.5.3. 单元格编辑输入框元素

$("body").append(inputHTML);
1

2.3.5.4. 筛选器的主副菜单元素

$("body").append(replaceHtml(filtermenuHTML(), { "menuid": "filter" }));
$("body").append(replaceHtml(filtersubmenuHTML(), { "menuid": "filter" }));
1
2

2.3.5.5. sheet栏的右键元素

$("body").append(sheetconfigHTML());
1

2.3.6. 填充页面body元素

postil.js Line293 根据data双重循环，在指定的单元格设置牛皮便条

luckysheetPostil.buildAllPs(Store.flowdata);
1

至此，luckysheetcreatedom()的分析就结束了，接下来是

2.4. canvas绘制界面

sheetmanage.initialjfFile().ini().execF() 函数 调用 refresh.luckysheetrefreshgrid()

luckysheetrefreshgrid(0, 0);
1

refresh.js Line951调用 draw.luckysheetDrawgrid()，这个函数包含三个部分：
luckysheetDrawgridRowTitle() // 绘制行标题部分
luckysheetDrawgridColumnTitle() // 绘制列标题部分
luckysheetDrawMain() // 绘制页面的编辑区域部分

luckysheetDrawgrid(scrollWidth, scrollHeight);
1

至此，LuckySheet界面静态页面的绘制工作的分析全部结束。