spreadjs_zh.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. /**
  2. * Spreadjs 通用方法集
  3. *
  4. * @author Mai
  5. * @date 2018/02/06
  6. * @version
  7. */
  8. const SpreadJsObj = {
  9. /**
  10. * 创建Spread(默认1张表,3行数据)
  11. * @param obj 用于创建spreadjs的Dom元素
  12. * @returns {GC.Spread.Sheets.Workbook}
  13. */
  14. createNewSpread: function (obj) {
  15. const spread = new GC.Spread.Sheets.Workbook(obj, {sheetCount: 1});
  16. spread.options.tabStripVisible = false;
  17. spread.options.scrollbarMaxAlign = true;
  18. spread.options.cutCopyIndicatorVisible = false;
  19. spread.options.allowCopyPasteExcelStyle = false;
  20. spread.options.allowUserDragDrop = false;
  21. spread.getActiveSheet().setRowCount(3);
  22. return spread;
  23. },
  24. /**
  25. * 保护sheet(需设置保护后, 单元格的locked等属性方可生效)
  26. * @param {GC.Spread.Sheets.Worksheet} sheet
  27. */
  28. protectedSheet: function (sheet) {
  29. const option = {
  30. allowSelectLockedCells: true,
  31. allowSelectUnlockedCells: true,
  32. allowResizeRows: true,
  33. allowResizeColumns: true
  34. };
  35. sheet.options.protectionOptions = option;
  36. sheet.options.isProtected = true;
  37. },
  38. /**
  39. * sheet批量操作优化(sheet操作大批量数据时, 屏蔽数据刷新, 可优化大量时间)
  40. * @param {GC.Spread.Sheets.Worksheet} sheet
  41. * @param {function} operation
  42. */
  43. massOperationSheet: function (sheet, operation) {
  44. sheet.suspendPaint();
  45. sheet.suspendEvent();
  46. operation();
  47. sheet.resumeEvent();
  48. sheet.resumePaint();
  49. },
  50. /**
  51. * 获取Obj左顶点位置(部分功能需通过spreadjs左顶点位置计算)
  52. * @param obj
  53. * @returns {{x: number, y: number}}
  54. */
  55. getObjPos: function (obj) {
  56. let target = obj;
  57. let pos = {x: obj.offsetLeft, y: obj.offsetTop};
  58. target = obj.offsetParent;
  59. while (target) {
  60. pos.x += target.offsetLeft;
  61. pos.y += target.offsetTop;
  62. target = target.offsetParent;
  63. }
  64. return pos;
  65. },
  66. /**
  67. * 以下四个方法来自Spread示例, 参见官网或文档
  68. */
  69. getHitTest: function (obj, e, sheet) {
  70. var offset = obj.offset(),
  71. x = e.pageX - offset.left,
  72. y = e.pageY - offset.top;
  73. return sheet.hitTest(x, y);
  74. },
  75. getTargetSelection: function (sheet, target) {
  76. if (target.hitTestType === GC.Spread.Sheets.SheetArea.colHeader) {
  77. return sheet.getRange(-1, target.col, sheet.getRowCount(), 1);
  78. } else if (target.hitTestType === GC.Spread.Sheets.SheetArea.rowHeader) {
  79. return sheet.getRange(target.row, -1, 1, sheet.getColumnCount());
  80. } else if (target.hitTestType === GC.Spread.Sheets.SheetArea.viewport) {
  81. return sheet.getRange(target.row, target.col, 1, 1);
  82. } else if (target.hitTestType === GC.Spread.Sheets.SheetArea.corner) {
  83. return sheet.getRange(-1, -1, sheet.getRowCount(), sheet.getColumnCount());
  84. };
  85. },
  86. getCellInSelections: function (selections, row, col) {
  87. const count = selections.length;
  88. let range;
  89. for (var i = 0; i < count; i++) {
  90. range = selections[i];
  91. if (range.contains(row, col)) {
  92. return range;
  93. }
  94. }
  95. return null;
  96. },
  97. checkTargetInSelection: function (selections, range) {
  98. var count = selections.length, sel;
  99. for (var i = 0; i < count; i++) {
  100. sel = selections[i];
  101. if (sel.containsRange(range)) {
  102. return true;
  103. }
  104. }
  105. return false;
  106. },
  107. /**
  108. * 获取 spread 在鼠标右键时, spread的选中区域
  109. * viewport, 选中鼠标点击单元格X, X不在原选中区域内, 则选中X
  110. * colHeader, 选中整列
  111. * rowHeader, 选中整行
  112. * corner, 全选
  113. * 该方法返回不符合需求时,可通过getHitTest/getTargetSelection/getCellInSelections/checkTargetInSelection来确定鼠标右键点击时,spread当前Sheet应选中的单元格
  114. * @param obj: 创建Spread的Dom元素(jquery-contextmenu.build方法的第一个变量可读取)
  115. * @param e: jquery-contextmenu.build方法的第二个变量
  116. * @param {GC.Spread.Sheets.Workbook} spread
  117. * @returns {*}
  118. */
  119. safeRightClickSelection: function (obj, e, spread) {
  120. const sheet = spread.getActiveSheet();
  121. const selections = sheet.getSelections(), target = this.getHitTest(obj, e, sheet), range = this.getTargetSelection(sheet, target);
  122. if (!this.checkTargetInSelection(selections, range)) {
  123. sheet.setSelection(range.row, range.col, range.rowCount, range.colCount);
  124. }
  125. return target;
  126. },
  127. /**
  128. * sheet中 使用delete键,触发EndEdited事件
  129. * @param {GC.Spreads.Sheets.Worksheet} sheet
  130. */
  131. addDeleteBind: function (sheet) {
  132. sheet.addKeyMap(46, false, false, false, false, function () {
  133. let selections = sheet.getSelections();
  134. });
  135. },
  136. /**
  137. * 根据sheet.zh_setting初始化sheet表头
  138. * @param {GC.Spread.Sheets.Worksheet} sheet
  139. */
  140. initSheetHeader: function (sheet) {
  141. if (!sheet.zh_setting) { return; }
  142. this.massOperationSheet(sheet, function () {
  143. sheet.setColumnCount(sheet.zh_setting.cols.length);
  144. for (const i in sheet.zh_setting.cols) {
  145. const col = sheet.zh_setting.cols[i];
  146. const cell = sheet.getCell(0, i, GC.Spread.Sheets.SheetArea.colHeader);
  147. cell.text(col.title);
  148. sheet.setColumnWidth(i, col.width);
  149. }
  150. sheet.rowOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.backward);
  151. sheet.showRowOutline(false);
  152. if (sheet.zh_setting.defaultRowHeight) {
  153. sheet.defaults.rowHeight = sheet.zh_setting.defaultRowHeight;
  154. }
  155. });
  156. },
  157. /**
  158. * 初始化sheet, 设置sheet.zh_setting, 并初始化表头
  159. * @param {GC.Spread.Sheets.Worksheet} sheet
  160. * @param setting
  161. */
  162. initSheet: function (sheet, setting) {
  163. sheet.zh_setting = setting;
  164. this.initSheetHeader(sheet);
  165. sheet.extendCellType = {};
  166. },
  167. /**
  168. * 整个sheet重新加载数据
  169. * @param sheet
  170. */
  171. reLoadSheetData: function (sheet) {
  172. this.protectedSheet(sheet);
  173. this.massOperationSheet(sheet, function () {
  174. // 设置总行数
  175. const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
  176. const totalRow = sortData.length + sheet.zh_setting.emptyRows;
  177. sheet.setRowCount(totalRow, GC.Spread.Sheets.SheetArea.viewport);
  178. // 控制空白行
  179. const emptyRows = sheet.getRange(sortData.length, -1, sheet.zh_setting.emptyRows, -1);
  180. emptyRows.locked(sheet.zh_dataType === 'tree');
  181. // 单元格写入数据
  182. sortData.forEach(function (data, i) {
  183. sheet.zh_setting.cols.forEach(function (col, j) {
  184. const cell = sheet.getCell(i, j);
  185. if (col.field !== '' && data[col.field]) {
  186. cell.value(data[col.field]);
  187. }
  188. })
  189. });
  190. // 设置列单元格格式
  191. sheet.zh_setting.cols.forEach(function (col, j) {
  192. if (!col.cellType) { return; }
  193. if (col.cellType === 'tree') {
  194. if (!sheet.extendCellType.tree) {
  195. sheet.extendCellType.tree = SpreadJsExtendCellType.getTreeNodeCellType();
  196. }
  197. sheet.getRange(-1, j, -1, 1).cellType(sheet.extendCellType.tree);
  198. } else if (col.cellType === 'tip') {
  199. if (!sheet.extendCellType.tip) {
  200. sheet.extendCellType.tip = SpreadJsExtendCellType.getTipCellType();
  201. }
  202. sheet.getRange(-1, j, -1, 1).cellType(sheet.extendCellType.tip);
  203. }
  204. });
  205. });
  206. },
  207. /**
  208. * 重新加载部分数据行
  209. * @param sheet
  210. * @param {Number} row
  211. * @param {Number} count
  212. */
  213. reLoadRowData: function (sheet, row, count) {
  214. this.massOperationSheet(sheet, function () {
  215. const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
  216. // 清空原单元格数据
  217. sheet.clear(row, -1, count, -1, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.StorageType.data);
  218. // 单元格重新写入数据
  219. for (let i = row; i < row + count; i++) {
  220. const data = sortData[i];
  221. sheet.zh_setting.cols.forEach(function (col, j) {
  222. const cell = sheet.getCell(i, j);
  223. if (col.field !== '' && data[col.field]) {
  224. cell.value(data[col.field]);
  225. }
  226. });
  227. };
  228. // 设置列单元格格式
  229. sheet.zh_setting.cols.forEach(function (col, j) {
  230. if (!col.cellType) { return; }
  231. if (col.cellType === 'tree') {
  232. if (!sheet.extendCellType.tree) {
  233. sheet.extendCellType.tree = SpreadJsExtendCellType.getTreeNodeCellType();
  234. }
  235. sheet.getRange(row, j, count, 1).cellType(sheet.extendCellType.tree);
  236. } else if (col.cellType === 'tip') {
  237. if (!sheet.extendCellType.tip) {
  238. sheet.extendCellType.tip = SpreadJsExtendCellType.getTipCellType();
  239. }
  240. sheet.getRange(row, j, count, 1).cellType(sheet.extendCellType.tip);
  241. }
  242. });
  243. });
  244. },
  245. /**
  246. * 根据data加载sheet数据,合并了一般数据和树结构数据的加载
  247. * @param {GC.Spread.Sheets.Worksheet} sheet
  248. * @param {String} dataType - 1.'zh_data' 2.'zh_tree'
  249. * @param {Array|PathTree} data - 对dataType对应
  250. */
  251. loadSheetData: function (sheet, dataType, data){
  252. sheet.zh_dataType = dataType;
  253. if (dataType === 'tree') {
  254. sheet.zh_tree = data;
  255. } else {
  256. sheet.zh_data = data;
  257. }
  258. this.reLoadSheetData(sheet);
  259. }
  260. };