From 0f812e78ad399eacb43d8c6ac5d815ff6dd3c50c Mon Sep 17 00:00:00 2001
From: luanhualiang <luanhualiang@dianmi365.com>
Date: Fri, 14 Aug 2020 13:00:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=9B=B4=E5=A4=9A=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=E6=B4=BE=E5=8F=91=EF=BC=8C=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=A2=9E=E5=8A=A0=E6=B3=A8=E9=87=8A=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue              | 12 +++++-
 src/components/index.vue | 57 +++++++++++++++++----------
 src/core/Body.js         | 41 +++++++++++++++++--
 src/core/Cell.js         | 11 +++++-
 src/core/Clipboard.js    | 32 +++++++--------
 src/core/ColumnHeader.js |  4 +-
 src/core/Context.js      |  1 +
 src/core/DataGrid.js     | 85 ++++++++++++++++++++++------------------
 src/core/Events.js       | 46 +++++++++++++---------
 src/core/Row.js          | 14 +++----
 src/core/RowHeader.js    |  2 +-
 src/core/Validator.js    | 18 ++++++---
 src/core/constants.js    | 37 ++++++++---------
 13 files changed, 227 insertions(+), 133 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 150c24c..b5116f5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,9 @@
       :data="gridData"
       :fixed-left="2"
       :fixed-right="1"
-      @on-update="onUpdate"
+      @after-edit-cell="afterEditCell"
+      @after-autofill="afterAutofill"
+      @after-paste="afterPaste"
     ></DataGrid>
   </div>
 </template>
@@ -88,7 +90,13 @@ export default {
       ]
       this.$refs.datagrid.updateData(data);
     },
-    onUpdate(data) {
+    afterEditCell(data) {
+      console.log(data)
+    },
+    afterAutofill(data) {
+      console.log(data)
+    },
+    afterPaste(data) {
       console.log(data)
     },
     getCheckedRows() {
diff --git a/src/components/index.vue b/src/components/index.vue
index 56b034c..2e3013a 100644
--- a/src/components/index.vue
+++ b/src/components/index.vue
@@ -16,7 +16,9 @@
             contenteditable="true"
             v-show="isSimple"
             @input="inputHandler"
-            @keydown.tab.prevent @keydown.enter.prevent @keydown.esc.prevent
+            @keydown.tab.prevent 
+            @keydown.enter.prevent 
+            @keydown.esc.prevent
           ></div>
           <el-date-picker
             ref="month"
@@ -83,15 +85,15 @@
             ></el-option>
           </el-select>
           <!-- <el-cascader
-                        ref="cascader"
-                        v-else-if="dataType==='cascader'"
-                        :class="`${CSS_PREFIX}-popup`"
-                        :style="popupSty"
-                        v-model="cascader_value"
-                        size="medium"
-                        :options="selectOptions"
-                        @change="selectChange">
-                    </el-cascader> -->
+            ref="cascader"
+            v-else-if="dataType==='cascader'"
+            :class="`${CSS_PREFIX}-popup`"
+            :style="popupSty"
+            v-model="cascader_value"
+            size="medium"
+            :options="selectOptions"
+            @change="selectChange">
+          </el-cascader> -->
         </div>
       </div>
     </div>
@@ -99,9 +101,9 @@
 </template>
 <script>
 import { CSS_PREFIX, HEADER_HEIGHT } from "../core/constants.js";
+import { getMaxRow } from '../core/util.js'
 import DataGrid from "../core/DataGrid.js";
 import Clickoutside from './clickoutside.js'
-import { getMaxRow } from '../core/util.js'
 const SIMPLE_DATE_TYPES = ["text", "number", "phone", "email"];
 const COMPLEX_DATE_TYPES = ["month", "date", "datetime", "select"];
 
@@ -219,9 +221,6 @@ export default {
     setFullScreen() {
       this.grid.resize();
     },
-    doPaste() {
-      this.isPaste = true
-    },
     editCell() {
       const {
         dataType,
@@ -310,7 +309,16 @@ export default {
         }
       }
     },
+    doPaste() {
+      // 粘贴事件标识
+      this.isPaste = true
+    },
     inputHandler(e) {
+      /**
+       * 复制粘贴的基本原理：直接监听可编辑元素（这里是contenteditable=true的div）的
+       * input事件，按下CTRL+V会先触发paste事件，接着会触发input事件，在paste事件中
+       * 定义一个标识，这样在input事件就可以区分内容是通过粘贴来的还是手动输入的
+       */
       const val = e.target.innerText;
       if (!this.isPaste) {
         this.showEditor()
@@ -327,6 +335,7 @@ export default {
           textArr = arr.map(item => item.split("\t"));
         }
 
+        // 通过table的格式进行粘贴解析
         // const objE = document.createElement('div')
         // objE.innerHTML = e.target.innerHTML
         // const dom = objE.childNodes
@@ -365,7 +374,6 @@ export default {
     selectChange(val) {
       this.grid.setTempData(val)
     },
-    handlePaste(e) {},
     handleclickoutside() {
       this.grid.doneEdit()
     }
@@ -384,14 +392,23 @@ export default {
         fixedRight: this.fixedRight,
         columns: this.columns,
         data: this.data,
-        onEditCell: () => {
+        beforeSelectCell: () => {},
+        afterSelectCell: (cell) => {
+          self.selectCell(cell)
+        },
+        beforeMultiSelectCell: () => {},
+        afterMultiSelectCell: () => {},
+        beforeEditCell: () => {
           self.editCell();
         },
-        onSelectCell: (cell) => {
-          self.selectCell(cell)
+        afterEditCell: (data) => {
+          self.$emit('after-edit-cell', data)
+        },
+        afterAutofill: (data) => {
+          self.$emit('after-autofill', data)
         },
-        onUpdateData: (rowData) => {
-          self.$emit('on-update', rowData)
+        afterPaste: (data) => {
+          self.$emit('after-paste', data)
         }
       });
     });
diff --git a/src/core/Body.js b/src/core/Body.js
index 8c94e71..1639c78 100644
--- a/src/core/Body.js
+++ b/src/core/Body.js
@@ -25,23 +25,39 @@ class Body {
       return sum + item.height;
     }, this.grid.tableHeaderHeight);
   }
+  /**
+   * CTRL+V 粘贴
+   * @param {Array} data 粘贴板中的数据
+   */
   pasteData(data) {
-    const { editor } = this.grid;
+    const { xIndex, yIndex } = this.grid.editor;
     for (let ri = 0; ri <= data.length - 1; ri++) {
       const len = data[ri].length;
       for (let ci = 0; ci <= len - 1; ci++) {
-        const cells = this.rows[ri + editor.yIndex].allCells;
-        const cell = cells[ci + editor.xIndex];
+        const cells = this.rows[ri + yIndex].allCells;
+        const cell = cells[ci + xIndex];
         cell.setData(data[ri][ci]);
       }
     }
+    // 粘贴后事件派发
+    const startY = yIndex
+    const endY = startY + data.length - 1
+    let rowDatas = []
+    for (let i = startY; i <= endY; i++) {
+      rowDatas.push(this.getRowData(i))
+    }
+    this.grid.afterPaste(rowDatas)
   }
+  /**
+   * autofull自动填充
+   */
   autofillData() {
     const { value } = this.getSelectedData();
     const xStep = value[0].length;
     const yStep = value.length;
     const { xArr, yArr } = this.grid.autofill;
-
+    const { yArr: syArr } = this.grid.selector
+    
     if (yArr[1] < 0 || xArr[1] < 0) return;
 
     for (let ri = 0; ri <= yArr[1] - yArr[0]; ri++) {
@@ -53,6 +69,22 @@ class Body {
         cell.setData(val);
       }
     }
+
+    // 自动填充后事件派发
+    let startY = syArr[0]
+    let endY = syArr[1]
+    let rowDatas = []
+    if (yArr[0] !== syArr[0]) { // 纵方向向上
+      startY = yArr[0]
+    } else {
+      startY = syArr[1] + 1
+      endY = yArr[1]
+    }
+    for (let i = startY; i <= endY; i++) {
+      rowDatas.push(this.getRowData(i))
+    }
+    this.grid.afterAutofill(rowDatas)
+
     this.grid.clearAuaofill();
   }
   resizeColumn(colIndex, width) {
@@ -345,6 +377,7 @@ class Body {
       value: cell.value
     }
   }
+  // 批量更新表格数据
   updateData(data) {
     if (data && Array.isArray(data)) {
       data.forEach(item => {
diff --git a/src/core/Cell.js b/src/core/Cell.js
index b572db9..89155ae 100644
--- a/src/core/Cell.js
+++ b/src/core/Cell.js
@@ -1,3 +1,5 @@
+import Context from "./Context.js";
+import Validator from "./Validator.js";
 import {
   SELECT_BORDER_COLOR,
   SELECT_AREA_COLOR,
@@ -6,8 +8,6 @@ import {
   READONLY_TEXT_COLOR,
   ERROR_TIP_COLOR
 } from "./constants.js";
-import Context from "./Context.js";
-import Validator from "./Validator.js";
 
 class Cell extends Context {
   constructor(
@@ -52,6 +52,7 @@ class Cell extends Context {
     if (column.rule && column.rule.immediate === false) return; // 编辑器初始化不需要校验
     this.validate();
   }
+  // 鼠标横坐标是否位于【焦点单元格】所在的autofill触点范围内
   isInHorizontalAutofill(mouseX, mouseY) {
     return (
       mouseX > this.x + this.grid.scrollX + this.width - 3 &&
@@ -60,6 +61,7 @@ class Cell extends Context {
       mouseX < this.grid.width - this.grid.fixedRightWidth
     );
   }
+  // 鼠标横坐标是否位于处于【冻结列中焦点单元格】所在的autofill触点范围内
   isInsideFixedHorizontalAutofill(mouseX, mouseY) {
     const x =
       this.grid.width -
@@ -84,6 +86,10 @@ class Cell extends Context {
     this.valid = flag;
     this.message = message;
   }
+  /**
+   * @param {String|Number} val 需要设置的值
+   * @param {Boolean} ignore 是否忽略readonly属性可以修改
+   */
   setData(val, ignore) {
     if (!ignore && this.readonly) return;
 
@@ -115,6 +121,7 @@ class Cell extends Context {
     }
     this.label = label;
   }
+  // 对于下拉类型的数据，对外展示的是label，实际存的是value，所以在更新这类数据的时候需要做一个转换
   getMapValue(label) { // label => value
     let value = label;
     if (this.dataType === "select" && Array.isArray(this.options)) {
diff --git a/src/core/Clipboard.js b/src/core/Clipboard.js
index 5d88cd0..750ff6e 100644
--- a/src/core/Clipboard.js
+++ b/src/core/Clipboard.js
@@ -35,22 +35,22 @@ class Clipboard {
   paste() {
     this.isPaste = true
   }
-  paste2(e) {
-    const { editor, selector, autofill, body } = this.grid;
-    let textArr;
-    let rawText = e.clipboardData.getData("text/plain");
-    // let arr = isMac ? rawText.split('\r').map(item => item.split('\t')) : rawText.split('\r').map(item => item.split('\t')).slice(0, -1) // windows系统截取掉最后一个空白字符
-    let arr = rawText.split("\r");
-    if (arr.length === 1) {
-      let _arr = arr[0].split("\n");
-      textArr = _arr.map(item => item.split("\t"));
-    } else {
-      textArr = arr.map(item => item.split("\t"));
-    }
-    if (textArr.length) {
-      body.pasteData(textArr);
-    }
-  }
+  // paste2(e) {
+  //   const { editor, selector, autofill, body } = this.grid;
+  //   let textArr;
+  //   let rawText = e.clipboardData.getData("text/plain");
+  //   // let arr = isMac ? rawText.split('\r').map(item => item.split('\t')) : rawText.split('\r').map(item => item.split('\t')).slice(0, -1) // windows系统截取掉最后一个空白字符
+  //   let arr = rawText.split("\r");
+  //   if (arr.length === 1) {
+  //     let _arr = arr[0].split("\n");
+  //     textArr = _arr.map(item => item.split("\t"));
+  //   } else {
+  //     textArr = arr.map(item => item.split("\t"));
+  //   }
+  //   if (textArr.length) {
+  //     body.pasteData(textArr);
+  //   }
+  // }
   select(textArr) {
     this.isPaste = false
     // 复制完把被填充的区域选中，并把激活单元格定位到填充区域的第一个
diff --git a/src/core/ColumnHeader.js b/src/core/ColumnHeader.js
index 39031f8..e68b497 100644
--- a/src/core/ColumnHeader.js
+++ b/src/core/ColumnHeader.js
@@ -1,8 +1,8 @@
+import Context from "./Context.js";
 import {
   SELECT_BORDER_COLOR,
   SELECT_BG_COLOR
 } from "./constants.js";
-import Context from "./Context.js";
 
 class ColumnHeader extends Context {
   constructor(grid, index, x, y, width, height, column, options) {
@@ -68,6 +68,8 @@ class ColumnHeader extends Context {
           borderWidth: 2
         });
       }
+      
+      // 弥补相邻单元格线条覆盖的问题
       // if (this.index - 1 === maxX) {
       //   const points = [
       //     [x - 1, this.y + this.height],
diff --git a/src/core/Context.js b/src/core/Context.js
index b8595e9..8e453e7 100644
--- a/src/core/Context.js
+++ b/src/core/Context.js
@@ -64,6 +64,7 @@ class Context {
       mouseY > this.grid.tableHeaderHeight
     );
   }
+  // 鼠标坐标是否在表头范围内
   isInsideHeader(mouseX, mouseY) {
     return mouseY > this.y && mouseY < this.y + this.grid.tableHeaderHeight;
   }
diff --git a/src/core/DataGrid.js b/src/core/DataGrid.js
index d5c60a6..3493d9d 100644
--- a/src/core/DataGrid.js
+++ b/src/core/DataGrid.js
@@ -24,7 +24,6 @@ import {
   SCROLLER_TRACK_SIZE,
   HEADER_HEIGHT
 } from "./constants.js";
-// import './index.scss'
 
 class DataGrid {
   constructor(target, options) {
@@ -36,8 +35,8 @@ class DataGrid {
     this.horizontalScrollerSize = SCROLLER_TRACK_SIZE;
     this.verticalScrollerSize = SCROLLER_TRACK_SIZE;
 
-    this.tempValue = '';
-    this.focusCell = null;
+    this.tempValue = ''; // 存储用户输入的临时值，当执行doneEdit后才去setData()
+    this.focusCell = null; // 当前焦点所在的cell
 
     this.hashChange = {}; // diff changed
 
@@ -105,13 +104,24 @@ class DataGrid {
         fixedLeft: 0,
         fixedRight: 0,
         showCheckbox: true,
-        onSelectCell: cell => {},
-        onMultiSelectCell: cells => {},
-        onEditCell: cell => {},
-        onSelectRow: row => {},
-        onResizeColumn: () => {},
-        onResizeRow: () => {},
-        onUpdateData: () => {}
+        beforeSelectCell: cell => {}, // 选中单元格之前触发
+        afterSelectCell: cell => {},
+        beforeMultiSelectCell: cells => {}, // 批量选中单元格之前触发
+        afterMultiSelectCell: cells => {},
+        beforeEditCell: cell => {}, // 编辑单元格
+        afterEditCell: cell => {},
+        beforeSelectRow: row => {}, // 选中行触发
+        afterSelectRow: row => {},
+        beforeResizeColumn: () => {}, // 调整列宽
+        afterResizeColumn: () => {},
+        beforeResizeRow: () => {}, //调整行高
+        afterResizeRow: () => {},
+        beforeAutofill: () => {}, // 自动填充
+        afterAutofill: () => {},
+        beforeCopy: () => {}, // 复制
+        afterCopy: () => {},
+        beforePaste: () => {}, // 粘贴
+        afterPaste: () => {}
       },
       options
     );
@@ -132,6 +142,9 @@ class DataGrid {
     }
     this.originFixedWidth = ROW_INDEX_WIDTH + this.checkboxWidth;
   }
+  /**
+   * 获取容器可是区域宽、高，设置canvas容器样式尺寸、画布尺寸
+   */
   setLayoutSize(options = {}) {
     const el = this.target.parentElement;
     const rootEl = el.parentElement;
@@ -149,6 +162,9 @@ class DataGrid {
     el.style.height = this.height + "px";
     this.painter.scaleCanvas(dpr);
   }
+  /**
+   * 获取表格左、右冻结列宽，表格实际的宽、高
+   */
   getTableSize() {
     let fixedLeftWidth = this.originFixedWidth;
     let fixedRightWidth = SCROLLER_TRACK_SIZE;
@@ -171,13 +187,13 @@ class DataGrid {
   }
   initTableSize() {
     this.getTableSize();
-
     this.fillTableWidth();
   }
+  /**
+   * 列总宽小于可视区域宽度时，需要补余
+   */
   fillTableWidth() {
-    // 列较少时，宽度不够补余
-    if (this.tableWidth <= this.width - SCROLLER_TRACK_SIZE) {
-      // 没有横向滚动条
+    if (this.tableWidth <= this.width - SCROLLER_TRACK_SIZE) { // 没有横向滚动条
       const fillCellWidth =
         (this.width - SCROLLER_TRACK_SIZE - this.tableWidth) /
         this.columnsLength;
@@ -186,25 +202,14 @@ class DataGrid {
       this.tableWidth = this.width - SCROLLER_TRACK_SIZE;
       this.fixedLeftWidth = 0;
       this.fixedRightWidth = SCROLLER_TRACK_SIZE;
-      // this.hasHorizontalScroll = false
-    } else {
-      // this.fixedLeftWidth = fixedLeftWidth
-      // this.fixedRightWidth = fixedRightWidth + SCROLLER_TRACK_SIZE
-      // this.hasHorizontalScroll = true
-    }
-    if (this.tableHeight <= this.height - SCROLLER_TRACK_SIZE) {
-      // 没有纵向滚动条
-      // this.hasVerticalScroll = false
-      // this.height = this.tableHeight + SCROLLER_TRACK_SIZE
-    } else {
-      // this.hasVerticalScroll = true
     }
+    
     this.scroller.reset();
   }
   resize() {
     const diffX = this.tableWidth - this.width + this.scrollX;
-    this.setLayoutSize();
 
+    this.setLayoutSize();
     this.fillTableWidth();
 
     if (
@@ -249,11 +254,10 @@ class DataGrid {
     this.target.appendChild(this.rootEl.el);
   }
   /**
-   * 选择、编辑相关
+   * 选择、编辑相关----------------------------------------------------->
    */
   // mousedown事件 -> 开始拖拽批量选取
   selectCell({ colIndex, rowIndex }) {
-    // this.clipboard.el.focus();
     this.clearMultiSelect();
     this.editor.xIndex = colIndex;
     this.editor.yIndex = rowIndex;
@@ -263,7 +267,10 @@ class DataGrid {
 
     this.putCell()
   }
-  putCell() { // 将数据填充到div编辑器中
+  /**
+   * 将画布单元格中的数据传递到编辑器中
+   */
+  putCell() {
     const {
       x,
       y,
@@ -279,12 +286,12 @@ class DataGrid {
         ? this.width -
           (this.tableWidth - x - width) -
           width -
-          this.verticalScrollerSize
+          SCROLLER_TRACK_SIZE
         : fixed === "left"
         ? x
         : x + this.scrollX;
     const _y = y + this.scrollY;
-    this.onSelectCell({
+    this.afterSelectCell({
       value,
       x: _x,
       y: _y,
@@ -360,7 +367,7 @@ class DataGrid {
     if (this.focusCell && !this.focusCell.readonly) {
       this.editor.show = true;
       this.selector.show = false;
-      this.onEditCell();
+      this.beforeEditCell();
     }
   }
   // 完成编辑
@@ -371,9 +378,8 @@ class DataGrid {
       if (this.focusCell.value !== this.tempValue) {
         this.focusCell.setData(this.tempValue)
         const rowData = this.body.getRowData(this.focusCell.rowIndex)
-        this.onUpdateData(rowData)
+        this.afterEditCell(rowData)
       }
-      // this.clipboard.el.focus(); // 通过enter键变为非编辑模式，div编辑框不会失焦
       this.putCell()
       this.clipboard.clear();
     }
@@ -381,6 +387,9 @@ class DataGrid {
   setData(value) {
     this.focusCell && this.focusCell.setData(value);
   }
+  /**
+   * 将用户通过编辑器输入的值存储为一个临时变量，执行doneEdit()后再去setData()
+   */
   setTempData(value) {
     this.editor.show = true;
     this.selector.show = false;
@@ -471,7 +480,7 @@ class DataGrid {
     const cellTotalViewHeight =
       this.focusCell.y + this.focusCell.height + this.scrollY;
     const viewWidth = this.width - this.fixedRightWidth;
-    const viewHeight = this.height - this.verticalScrollerSize;
+    const viewHeight = this.height - SCROLLER_TRACK_SIZE;
     const diffLeft = this.focusCell.x + this.scrollX - this.fixedLeftWidth;
     const diffRight = viewWidth - cellTotalViewWidth;
     const diffTop = this.focusCell.y + this.scrollY - this.tableHeaderHeight;
@@ -491,7 +500,7 @@ class DataGrid {
     }
   }
   /**
-   * 画布绘制相关
+   * 画布绘制相关------------------------------------------------------->
    */
   initPaint() {
     this.draw();
@@ -523,9 +532,9 @@ class DataGrid {
 
     // 绘制滚动条
     this.scroller.draw();
-
   }
   updateColumns(columns) {
+    // 代码冗余，后续优化
     const maxHeaderRow = getMaxRow(columns)
     this.tableHeaderHeight = HEADER_HEIGHT * maxHeaderRow
     this.headers = calCrossSpan(columns, maxHeaderRow)
diff --git a/src/core/Events.js b/src/core/Events.js
index 8e414d0..91e0125 100644
--- a/src/core/Events.js
+++ b/src/core/Events.js
@@ -72,6 +72,7 @@ function throttle(
 }
 function handleMouseDown(e) {
   e.preventDefault();
+  // 点击画布的任何区域都需要将编辑器变为非编辑模式
   this.doneEdit();
   const rect = e.target.getBoundingClientRect();
   const x = e.clientX - rect.left;
@@ -110,9 +111,7 @@ function handleMouseUp(e) {
   this.scroller.mouseUp(x, y);
 }
 function handleClick(e) {
-  if (e.target.tagName.toLowerCase() === "canvas") {
-    e.preventDefault();
-  }
+  e.preventDefault();
   const rect = e.target.getBoundingClientRect();
   const x = e.clientX - rect.left;
   const y = e.clientY - rect.top;
@@ -123,9 +122,7 @@ function handleClick(e) {
   }
 }
 function handleDbClick(e) {
-  if (e.target.tagName.toLowerCase() === "canvas") {
-    e.preventDefault();
-  }
+  e.preventDefault();
   const rect = e.target.getBoundingClientRect();
   const x = e.clientX - rect.left;
   const y = e.clientY - rect.top;
@@ -152,37 +149,42 @@ function handleKeydown(e) {
     (e.ctrlKey && e.keyCode === 90) ||
     (e.metaKey && !e.shiftKey && e.keyCode === 90)
   ) {
-    // e.preventDefault()
-    console.log("undo");
+    e.preventDefault()
+    // TODO Undo
   }
   // 恢复
   if (
     (e.ctrlKey && e.keyCode === 89) ||
     (e.metaKey && e.shiftKey && e.keyCode === 90)
   ) {
-    // e.preventDefault()
-    console.log("recovery");
+    e.preventDefault()
+    // TODO Recovery
   }
   // CTRL+C／Command+C
   if ((e.ctrlKey && e.keyCode === 67) || (e.metaKey && e.keyCode === 67)) {
-    // e.preventDefault()
+    e.preventDefault()
     this.clipboard.copy();
   }
   // CTRL+V／Command+V
   if ((e.ctrlKey && e.keyCode === 86) || (e.metaKey && e.keyCode === 86)) {
-      // e.preventDefault()
+      // e.preventDefault() // 注意：这里一定不能阻止默认事件，因为粘贴功能依赖原生的paste事件
       this.clipboard.paste();
   }
   // CTRL+A／Command+A
   if ((e.ctrlKey && e.keyCode) === 65 || (e.metaKey && e.keyCode === 65)) {
-    // e.preventDefault()
-    console.log("select all");
+    e.preventDefault()
+    // TODO Select all
   }
+  // CTRL+R／CRTRL+F等类型的事件不阻止默认事件
   if (e.metaKey || e.ctrlKey) {
-    // CTRL+R／CRTRL+F等类型的事件不禁用默认事件
     return;
   }
-  // e.preventDefault();
+
+  /**
+   * 由于非编辑模式下，输入中文无法正常触发原生input可编辑元素中的中文输入法模式，
+   * 固改用利用原生的可编辑元素的input事件处理非编辑模式下直接敲击键盘可进入编辑模式，
+   * 前提是该元素必须先获取聚焦
+   */
   // const keyHandler = k => {
   //   if (
   //     (k >= 65 && k <= 90) ||
@@ -289,7 +291,7 @@ class Events {
       grid,
       isFirefox
     } = this
-    const rootEl = el.parentElement;
+    // const rootEl = el.parentElement;
     this.eventTasks = {
       'clickoutside': handleClickoutside.bind(grid),
       'mousedown': handleMouseDown.bind(grid),
@@ -303,6 +305,14 @@ class Events {
         context: grid
       }),
     }
+    /**
+     * 这里用js的方案实现Clickoutside会导致一个问题，对于select／data-picker等浮层组件，
+     * 若其超过视窗之外，则会判断不准确，所以直接用v-clickoutside指令的方式完美替代；
+     * -----------------------------------------------------------------------------
+     * 再解释这里为什么有些事件绑定在canvas上而有些绑定在window上？
+     * mousemove／mouseup事件：因为存在一些拖拽的事件（比如调整列宽、拖动滚动条等）拥有“中间状态”，
+     * 需要鼠标在画布之外时也保持事件执行的能力
+     */
     // bindClickoutside.call(grid, rootEl, handleClickoutside.bind(grid))
     bind(el, 'mousedown', this.eventTasks.mousedown, false)
     bind(window, 'mousemove', this.eventTasks.mousemove, false)
@@ -318,7 +328,7 @@ class Events {
       el,
       isFirefox
     } = this
-    const rootEl = el.parentElement;
+    // const rootEl = el.parentElement;
     // unbindClickoutside(rootEl)
     unbind(el, 'mousedown', this.eventTasks.mousedown, false)
     unbind(window, 'mousemove', this.eventTasks.mousemove, false)
diff --git a/src/core/Row.js b/src/core/Row.js
index 1babfb1..a0815d9 100644
--- a/src/core/Row.js
+++ b/src/core/Row.js
@@ -73,6 +73,7 @@ class Row extends Context {
       everyOffsetX += width;
     }
   }
+  // 鼠标枞坐标是否位于焦点单元格所在的autofill触点范围内
   isInVerticalAutofill(mouseX, mouseY) {
     return (
       this.grid.autofill.yIndex === this.rowIndex &&
@@ -84,6 +85,7 @@ class Row extends Context {
     this.checked = typeof checked === 'boolean' ? checked : !this.checked;
     this.rowHeader.handleCheck(this.checked);
   }
+  // 选中单个单元格
   mouseDown(x, y) {
     // 如果位于autofill触点上则不执行发选择单元格
     const cell = this.allCells[this.grid.autofill.xIndex];
@@ -104,6 +106,7 @@ class Row extends Context {
       }
     }
   }
+  // 批量选中单元格时移动批量选取
   mouseMove(mouseX, mouseY) {
     for (let i = 0; i < this.allCells.length; i++) {
       const cell = this.allCells[i];
@@ -113,6 +116,8 @@ class Row extends Context {
       ) {
         const { colIndex, rowIndex, x, y, width, height, valid, message, fixed } = cell;
         this.grid.multiSelectCell(colIndex, rowIndex, mouseX, mouseY);
+
+        // 显示单元格tooltip提示
         this.grid.tooltip.update({
           valid,
           message,
@@ -125,6 +130,7 @@ class Row extends Context {
       }
     }
   }
+  // 寻找autofill触点
   handleAutofill(x, y) {
     const cell = this.allCells[this.grid.autofill.xIndex];
     if (!cell) return;
@@ -135,6 +141,7 @@ class Row extends Context {
       this.grid.target.style.cursor = "crosshair";
     }
   }
+  // 单击autofill触点开始拖拽
   handleStartAutofill(x, y) {
     const cell = this.allCells[this.grid.autofill.xIndex];
     if (!cell) return;
@@ -161,13 +168,6 @@ class Row extends Context {
       }
     }
   }
-  // getCell(colIndex, rowIndex) {
-  //     const row = this.get(rowIndex);
-  //     if (row !== undefined && this.cells !== undefined && this.cells[colIndex] !== undefined) {
-  //         return this.cells[colIndex];
-  //     }
-  //     return null;
-  // }
   resizeColumn(colIndex, width) {
     const scrollRightBoundry =
       this.grid.width -
diff --git a/src/core/RowHeader.js b/src/core/RowHeader.js
index dce3ecf..30a9e61 100644
--- a/src/core/RowHeader.js
+++ b/src/core/RowHeader.js
@@ -1,9 +1,9 @@
+import Context from "./Context.js";
 import {
   CHECK_BOX_WIDTH,
   SELECT_BORDER_COLOR,
   SELECT_BG_COLOR
 } from "./constants.js";
-import Context from "./Context.js";
 
 const oncheck = new Image();
 const offcheck = new Image();
diff --git a/src/core/Validator.js b/src/core/Validator.js
index f18a717..cc5992d 100644
--- a/src/core/Validator.js
+++ b/src/core/Validator.js
@@ -38,13 +38,17 @@ function getValidation(flag, key) {
 
 class Validator {
   constructor(column) {
+    /**
+     * type: month|date|datetime|number|phone|email|select 数据格式类型
+     * required 是否必填
+     * validator: RegExp|Function 校验器
+     * message 校验失败提示文案
+     * validateKey 单元格key
+     * validateTitle 单元格title
+     * options 数据格式为type时的枚举数据
+     */
     this.validateKey = column.key;
     this.validateTitle = column.title;
-
-    // type: month|date|datetime|number|phone|email|select
-    // required
-    // validator: RegExp|Function
-    // message
     this.type = column.type;
     this.options = column.options;
     Object.assign(this, column.rule);
@@ -53,7 +57,7 @@ class Validator {
     const self = this
     const { required, validator, operator, options, type, descriptor } = this;
 
-    if (required && !v && v !== 0) {
+    if (required && !v && v !== 0) { // 必填校验
       return getValidation.call(this, false, "required");
     }
 
@@ -62,6 +66,7 @@ class Validator {
       return getValidation.call(this, pattern.test(v), "notIn");
     } else if (typeof validator === "function") {
       let flag = true
+      // 这里处理异步校验函数
       await validator(v, row, (res) => {
         if (typeof res === 'string') {
           self.message = res
@@ -77,6 +82,7 @@ class Validator {
     if (rules[type] && !rules[type].test(v)) {
       return getValidation.call(this, false, "notMatch");
     }
+    // 下拉校验值必须存在与枚举中
     if (type === "select") {
       const flag = options.map(item => item.value).includes(v);
       return getValidation.call(this, flag, "notMatch");
diff --git a/src/core/constants.js b/src/core/constants.js
index be02065..bf21973 100644
--- a/src/core/constants.js
+++ b/src/core/constants.js
@@ -1,34 +1,35 @@
 export const CSS_PREFIX = "xs-data-grid";
 
-export const HEADER_HEIGHT = 36;
+export const HEADER_HEIGHT = 36; // 表头行高
 
-export const ROW_INDEX_WIDTH = 36;
-export const CHECK_BOX_WIDTH = 36;
+export const ROW_INDEX_WIDTH = 36; // 索引列宽
+export const CHECK_BOX_WIDTH = 36; // 勾选框列宽
 
-export const CELL_HEIGHT = 36;
-export const MIN_CELL_WIDTH = 100;
-export const MIN_CELL_HEIGHT = 36;
+export const CELL_HEIGHT = 36; // 表格body部分的行高
+export const MIN_CELL_WIDTH = 100; // 表格body部分的最小列宽
+export const MIN_CELL_HEIGHT = 36; // 表格body部分的最小行高
 
-export const SCROLLER_TRACK_SIZE = 16;
-export const SCROLLER_SIZE = 8;
-export const SCROLLER_COLOR = "#dee0e3";
-export const SCROLLER_FOCUS_COLOR = "#bbbec4";
+export const SCROLLER_TRACK_SIZE = 16; // 滚动条轨道尺寸
+export const SCROLLER_SIZE = 8; // 滚动条滑块尺寸
+export const SCROLLER_COLOR = "#dee0e3"; // 滚动条滑块颜色
+export const SCROLLER_FOCUS_COLOR = "#bbbec4"; // 滚动条滑块聚焦时的颜色
 
-export const SELECT_BORDER_COLOR = "rgb(82,146,247)";
-export const SELECT_AREA_COLOR = "rgba(82,146,247,0.1)";
-export const SELECT_BG_COLOR = "rgba(82,146,247,0.1)";
-export const READONLY_COLOR = "#f8f8f9";
-export const READONLY_TEXT_COLOR = "#80848f";
-export const ERROR_TIP_COLOR = "#ED3F14";
+export const SELECT_BORDER_COLOR = "rgb(82,146,247)"; // 选中区域边框颜色
+export const SELECT_AREA_COLOR = "rgba(82,146,247,0.1)"; // 选中区域背景颜色
+export const SELECT_BG_COLOR = "rgba(82,146,247,0.1)"; // 当前焦点单元格所在行、列的背景色
 
-export const SIZE_MAP = {
+export const READONLY_COLOR = "#f8f8f9"; // 单元格只读背景色
+export const READONLY_TEXT_COLOR = "#80848f"; // 单元格只读文本颜色
+export const ERROR_TIP_COLOR = "#ED3F14"; // 单元格错误提示文本颜色
+
+export const SIZE_MAP = { // 尺寸枚举映射
   mini: 100,
   small: 140,
   medium: 200,
   large: 300
 };
 
-export const VALIDATOR_TYPES = [
+export const VALIDATOR_TYPES = [ // 校验类型枚举映射
   'month',
   'date',
   'datetime',