spreadjs_zh.js 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733
  1. /**
  2. * Spreadjs 通用方法集
  3. *
  4. * @author Mai
  5. * @date 2018/02/06
  6. * @version
  7. */
  8. const spreadNS = GC.Spread.Sheets;
  9. const SpreadJsObj = {
  10. /**
  11. * 创建Spread(默认1张表,3行数据)
  12. * @param obj 用于创建spreadjs的Dom元素
  13. * @returns {GC.Spread.Sheets.Workbook}
  14. */
  15. createNewSpread: function (obj) {
  16. const spread = new spreadNS.Workbook(obj, {sheetCount: 1});
  17. spread.options.tabStripVisible = false;
  18. spread.options.scrollbarMaxAlign = true;
  19. spread.options.cutCopyIndicatorVisible = false;
  20. spread.options.allowCopyPasteExcelStyle = false;
  21. spread.options.allowUserDragDrop = false;
  22. spread.getActiveSheet().setRowCount(3);
  23. return spread;
  24. },
  25. /**
  26. * 保护sheet(需设置保护后, 单元格的locked等属性方可生效)
  27. * @param {GC.Spread.Sheets.Worksheet} sheet
  28. */
  29. protectedSheet: function (sheet) {
  30. const option = {
  31. allowSelectLockedCells: true,
  32. allowSelectUnlockedCells: true,
  33. allowResizeRows: true,
  34. allowResizeColumns: true
  35. };
  36. sheet.options.protectionOptions = option;
  37. sheet.options.isProtected = true;
  38. sheet.options.allowCellOverflow = false;
  39. },
  40. /**
  41. * sheet批量操作优化(sheet操作大批量数据时, 屏蔽数据刷新, 可优化大量时间)
  42. * @param {GC.Spread.Sheets.Worksheet} sheet
  43. * @param {function} operation
  44. */
  45. beginMassOperation: function (sheet) {
  46. sheet.suspendPaint();
  47. sheet.suspendEvent();
  48. },
  49. endMassOperation: function (sheet) {
  50. sheet.resumeEvent();
  51. sheet.resumePaint();
  52. },
  53. massOperationSheet: function (sheet, operation) {
  54. this.beginMassOperation(sheet);
  55. operation();
  56. this.endMassOperation(sheet);
  57. },
  58. /**
  59. * 获取Obj左顶点位置(部分功能需通过spreadjs左顶点位置计算)
  60. * @param obj
  61. * @returns {{x: number, y: number}}
  62. */
  63. getObjPos: function (obj) {
  64. let target = obj;
  65. let pos = {x: obj.offsetLeft, y: obj.offsetTop};
  66. target = obj.offsetParent;
  67. while (target) {
  68. pos.x += target.offsetLeft;
  69. pos.y += target.offsetTop;
  70. target = target.offsetParent;
  71. }
  72. return pos;
  73. },
  74. /**
  75. * 以下四个方法来自Spread示例, 参见官网或文档
  76. */
  77. getHitTest: function (obj, e, sheet) {
  78. var offset = obj.offset(),
  79. x = e.pageX - offset.left,
  80. y = e.pageY - offset.top;
  81. return sheet.hitTest(x, y);
  82. },
  83. getTargetSelection: function (sheet, target) {
  84. if (target.hitTestType === spreadNS.SheetArea.colHeader) {
  85. return sheet.getRange(-1, target.col, sheet.getRowCount(), 1);
  86. } else if (target.hitTestType === spreadNS.SheetArea.rowHeader) {
  87. return sheet.getRange(target.row, -1, 1, sheet.getColumnCount());
  88. } else if (target.hitTestType === spreadNS.SheetArea.viewport) {
  89. return sheet.getRange(target.row, target.col, 1, 1);
  90. } else if (target.hitTestType === spreadNS.SheetArea.corner) {
  91. return sheet.getRange(-1, -1, sheet.getRowCount(), sheet.getColumnCount());
  92. };
  93. },
  94. getCellInSelections: function (selections, row, col) {
  95. const count = selections.length;
  96. let range;
  97. for (var i = 0; i < count; i++) {
  98. range = selections[i];
  99. if (range.contains(row, col)) {
  100. return range;
  101. }
  102. }
  103. return null;
  104. },
  105. checkTargetInSelection: function (selections, range) {
  106. var count = selections.length, sel;
  107. for (var i = 0; i < count; i++) {
  108. sel = selections[i];
  109. if (sel.containsRange(range)) {
  110. return true;
  111. }
  112. }
  113. return false;
  114. },
  115. /**
  116. * 获取 spread 在鼠标右键时, spread的选中区域
  117. * viewport, 选中鼠标点击单元格X, X不在原选中区域内, 则选中X
  118. * colHeader, 选中整列
  119. * rowHeader, 选中整行
  120. * corner, 全选
  121. * 该方法返回不符合需求时,可通过getHitTest/getTargetSelection/getCellInSelections/checkTargetInSelection来确定鼠标右键点击时,spread当前Sheet应选中的单元格
  122. * @param obj: 创建Spread的Dom元素(jquery-contextmenu.build方法的第一个变量可读取)
  123. * @param e: jquery-contextmenu.build方法的第二个变量
  124. * @param {GC.Spread.Sheets.Workbook} spread
  125. * @returns {*}
  126. */
  127. safeRightClickSelection: function (obj, e, spread) {
  128. const sheet = spread.getActiveSheet();
  129. const selections = sheet.getSelections(), target = this.getHitTest(obj, e, sheet), range = this.getTargetSelection(sheet, target);
  130. if (!this.checkTargetInSelection(selections, range)) {
  131. sheet.setSelection(range.row, range.col, range.rowCount, range.colCount);
  132. }
  133. return target;
  134. },
  135. /**
  136. * sheet中 使用delete键,触发EndEdited事件
  137. * @param {GC.Spreads.Sheets.Workbook} spread
  138. * @param {function} fun
  139. */
  140. addDeleteBind: function (spread, fun) {
  141. spread.commandManager().register('deleteEvent', function () {
  142. fun(spread.getActiveSheet());
  143. });
  144. spread.commandManager().setShortcutKey('null', GC.Spread.Commands.Key.del, false, false, false, false);
  145. spread.commandManager().setShortcutKey('deleteEvent', GC.Spread.Commands.Key.del, false, false, false, false);
  146. },
  147. /**
  148. * 根据sheet.zh_setting初始化sheet表头
  149. * @param {GC.Spread.Sheets.Worksheet} sheet
  150. */
  151. _initSheetHeader: function (sheet) {
  152. if (!sheet.zh_setting) { return; }
  153. sheet.setColumnCount(sheet.zh_setting.cols.length);
  154. sheet.setRowCount(sheet.zh_setting.headRows, spreadNS.SheetArea.colHeader);
  155. for (let iRow = 0; iRow < sheet.zh_setting.headRowHeight.length; iRow ++) {
  156. sheet.setRowHeight(iRow, sheet.zh_setting.headRowHeight[iRow], spreadNS.SheetArea.colHeader);
  157. }
  158. for (let iCol = 0; iCol < sheet.zh_setting.cols.length; iCol++) {
  159. const col = sheet.zh_setting.cols[iCol];
  160. const title = col.title.split('|');
  161. const colSpan = col.colSpan ? col.colSpan.split('|'): ['1'], rowSpan = col.rowSpan ? col.rowSpan.split('|'): ['1'];
  162. for (let i = 0; i < title.length; i++) {
  163. const cell = sheet.getCell(i, iCol, spreadNS.SheetArea.colHeader);
  164. cell.text(title[i]);
  165. if ((colSpan[i] !== '' && colSpan[i] !== '1') || (rowSpan[i] !== '' && rowSpan[i] !== '1')) {
  166. sheet.addSpan(i, iCol, parseInt(rowSpan[i]), parseInt(colSpan[i]), spreadNS.SheetArea.colHeader);
  167. }
  168. }
  169. sheet.setColumnWidth(iCol, col.width);
  170. }
  171. sheet.rowOutlines.direction(spreadNS.Outlines.OutlineDirection.backward);
  172. sheet.showRowOutline(false);
  173. if (sheet.zh_setting.defaultRowHeight) {
  174. sheet.defaults.rowHeight = sheet.zh_setting.defaultRowHeight;
  175. }
  176. },
  177. /**
  178. * 初始化sheet, 设置sheet.zh_setting, 并初始化表头
  179. * @param {GC.Spread.Sheets.Worksheet} sheet
  180. * @param setting
  181. */
  182. initSheet: function (sheet, setting) {
  183. this.beginMassOperation(sheet);
  184. sheet.zh_setting = setting;
  185. this._initSheetHeader(sheet);
  186. sheet.setRowCount(sheet.zh_setting.emptyRows);
  187. sheet.extendCellType = {};
  188. sheet.getRange(0, 0, sheet.getRowCount(), sheet.getColumnCount()).locked(setting.readOnly);
  189. this.endMassOperation(sheet);
  190. },
  191. /**
  192. * 整个sheet重新加载数据
  193. * @param sheet
  194. */
  195. reLoadSheetData: function (sheet) {
  196. const self = this;
  197. const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
  198. this.beginMassOperation(sheet);
  199. try {
  200. sheet.clear(0, 0, sheet.getRowCount(), sheet.getColumnCount(), spreadNS.SheetArea.viewport, spreadNS.StorageType.data)
  201. // 设置总行数
  202. const totalRow = sortData.length + sheet.zh_setting.emptyRows;
  203. sheet.setRowCount(totalRow, spreadNS.SheetArea.viewport);
  204. // 控制空白行
  205. const emptyRows = sheet.getRange(sortData.length, -1, sheet.zh_setting.emptyRows, -1);
  206. emptyRows.locked(sheet.zh_dataType === 'tree');
  207. // 单元格写入数据
  208. sortData.forEach(function (data, i) {
  209. sheet.zh_setting.cols.forEach(function (col, j) {
  210. const cell = sheet.getCell(i, j);
  211. if (col.field !== '' && data[col.field]) {
  212. cell.value(data[col.field]).locked(col.readOnly || sheet.zh_setting.readOnly || false).vAlign(1).hAlign(col.hAlign);
  213. } else {
  214. cell.locked(col.readOnly || sheet.zh_setting.readOnly || false).vAlign(1).hAlign(col.hAlign);
  215. }
  216. });
  217. });
  218. // 设置列单元格格式
  219. sheet.zh_setting.cols.forEach(function (col, j) {
  220. if (!col.cellType) { return; }
  221. if (col.cellType === 'tree') {
  222. if (!sheet.extendCellType.tree) {
  223. sheet.extendCellType.tree = self.CellType.getTreeNodeCellType();
  224. }
  225. sheet.getRange(-1, j, -1, 1).cellType(sheet.extendCellType.tree);
  226. } else if (col.cellType === 'tip') {
  227. if (!sheet.extendCellType.tip) {
  228. sheet.extendCellType.tip = self.CellType.getTipCellType();
  229. }
  230. sheet.getRange(-1, j, -1, 1).cellType(sheet.extendCellType.tip);
  231. }
  232. if (col.formatter) {
  233. sheet.getRange(-1, j, -1, 1).format(col.formatter);
  234. }
  235. });
  236. this.endMassOperation(sheet);
  237. } catch (err) {
  238. this.endMassOperation(sheet);
  239. }
  240. },
  241. /**
  242. * 重新加载部分数据行
  243. * @param {GC.Spread.Sheets.Worksheet} sheet
  244. * @param {Number} row
  245. * @param {Number} count
  246. */
  247. reLoadRowData: function (sheet, row, count) {
  248. const self = this;
  249. const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
  250. this.beginMassOperation(sheet);
  251. try {
  252. // 清空原单元格数据
  253. sheet.clear(row, -1, count, -1, spreadNS.SheetArea.viewport, spreadNS.StorageType.data);
  254. // 单元格重新写入数据
  255. for (let i = row; i < row + count; i++) {
  256. const data = sortData[i];
  257. if (!data) { continue; }
  258. sheet.zh_setting.cols.forEach(function (col, j) {
  259. const cell = sheet.getCell(i, j);
  260. if (col.field !== '' && data[col.field]) {
  261. cell.value(data[col.field]).locked(col.readOnly || sheet.zh_setting.readOnly || false).vAlign(1).hAlign(col.hAlign);
  262. } else {
  263. cell.locked(col.readOnly || sheet.zh_setting.readOnly || false).vAlign(1).hAlign(col.hAlign);
  264. }
  265. if (col.formatter) {
  266. cell.formatter(col.formatter);
  267. }
  268. });
  269. };
  270. // 设置列单元格格式
  271. sheet.zh_setting.cols.forEach(function (col, j) {
  272. if (!col.cellType) { return; }
  273. if (col.cellType === 'tree') {
  274. if (!sheet.extendCellType.tree) {
  275. sheet.extendCellType.tree = self.CellType.getTreeNodeCellType();
  276. }
  277. sheet.getRange(row, j, count, 1).cellType(sheet.extendCellType.tree);
  278. } else if (col.cellType === 'tip') {
  279. if (!sheet.extendCellType.tip) {
  280. sheet.extendCellType.tip = self.CellType.getTipCellType();
  281. }
  282. sheet.getRange(row, j, count, 1).cellType(sheet.extendCellType.tip);
  283. }
  284. });
  285. this.endMassOperation(sheet);
  286. } catch (err) {
  287. this.endMassOperation(sheet);
  288. }
  289. },
  290. /**
  291. * 重新加载部分行数据
  292. * @param {GC.Spread.Sheets.Worksheet} sheet
  293. * @param {Array} rows
  294. */
  295. reLoadRowsData: function (sheet, rows) {
  296. const self = this;
  297. const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
  298. this.beginMassOperation(sheet);
  299. try {
  300. for (const row of rows) {
  301. // 清空原单元格数据
  302. sheet.clear(row, -1, 1, -1, spreadNS.SheetArea.viewport, spreadNS.StorageType.data);
  303. const data = sortData[row];
  304. // 单元格重新写入数据
  305. sheet.zh_setting.cols.forEach(function (col, j) {
  306. // 设置值
  307. const cell = sheet.getCell(row, j);
  308. if (col.field !== '' && data[col.field]) {
  309. cell.value(data[col.field]).locked(col.readOnly || sheet.zh_setting.readOnly || false).vAlign(1).hAlign(col.hAlign);
  310. } else {
  311. cell.locked(col.readOnly || sheet.zh_setting.readOnly || false).vAlign(1).hAlign(col.hAlign);
  312. }
  313. // 设置单元格格式
  314. if (col.formatter) {
  315. cell.formatter(col.formatter);
  316. }
  317. if (col.cellType) {
  318. if (col.cellType === 'tree') {
  319. if (!sheet.extendCellType.tree) {
  320. sheet.extendCellType.tree = self.CellType.getTreeNodeCellType();
  321. }
  322. sheet.getRange(row, j, 1, 1).cellType(sheet.extendCellType.tree);
  323. } else if (col.cellType === 'tip') {
  324. if (!sheet.extendCellType.tip) {
  325. sheet.extendCellType.tip = self.CellType.getTipCellType();
  326. }
  327. sheet.getRange(row, j, 1, 1).cellType(sheet.extendCellType.tip);
  328. }
  329. }
  330. });
  331. };
  332. this.endMassOperation(sheet);
  333. } catch (err) {
  334. this.endMassOperation(sheet);
  335. }
  336. },
  337. reLoadNodesData: function (sheet, nodes) {
  338. nodes = nodes instanceof Array ? nodes : [nodes];
  339. for (const node of nodes) {
  340. const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
  341. this.reLoadRowData(sheet, sortData.indexOf(node), 1);
  342. }
  343. },
  344. /**
  345. * 根据data加载sheet数据,合并了一般数据和树结构数据的加载
  346. * @param {GC.Spread.Sheets.Worksheet} sheet
  347. * @param {String} dataType - 1.'zh_data' 2.'zh_tree'
  348. * @param {Array|PathTree} data - 对dataType对应
  349. */
  350. loadSheetData: function (sheet, dataType, data){
  351. sheet.zh_dataType = dataType;
  352. if (dataType === 'tree') {
  353. sheet.zh_tree = data;
  354. } else {
  355. sheet.zh_data = data;
  356. }
  357. this.protectedSheet(sheet);
  358. this.reLoadSheetData(sheet);
  359. },
  360. /**
  361. * 获取复制数据HTML格式(过滤不可见单元格)
  362. * @param {GC.Spread.Sheets.Worksheet} sheet
  363. * @returns {string}
  364. */
  365. getFilterCopyHTML: function (sheet) {
  366. const sel = sheet.getSelections()[0];
  367. const html = [];
  368. html.push('<table>');
  369. for (let i = sel.row, iLen = sel.row + sel.rowCount; i < iLen; i++) {
  370. // 跳过隐藏行
  371. if (!sheet.getCell(i, -1).visible()) { continue; }
  372. const rowHtml = [];
  373. rowHtml.push('<tr>');
  374. for (let j = sel.col, jLen = sel.col + sel.colCount; j < jLen; j++) {
  375. const data = sheet.getText(i, j);
  376. rowHtml.push('<td>' + data + '</td>');
  377. }
  378. rowHtml.push('</tr>');
  379. html.push(rowHtml.join(''));
  380. }
  381. html.push('</table>');
  382. return html.join('');
  383. },
  384. /**
  385. * 获取复制数据Text格式(过滤不可见单元格)
  386. * @param {GC.Spread.Sheets.Worksheet} sheet
  387. * @returns {string}
  388. */
  389. getFilterCopyText: function (sheet) {
  390. const copyData = [];
  391. const sel = sheet.getSelections()[0];
  392. for(let i = sel.row, iLen = sel.row + sel.rowCount; i < iLen; i++) {
  393. // 跳过隐藏行
  394. if (!sheet.getCell(i, -1).visible()) { continue; }
  395. const rowText = [];
  396. for (let j = sel.col, jLen = sel.col + sel.colCount; j < jLen; j++) {
  397. const data = sheet.getText(i, j);
  398. rowText.push(data);
  399. }
  400. copyData.push(rowText.join('\t'));
  401. }
  402. return copyData.join('\n');
  403. },
  404. locateTreeNode: function (sheet, id) {
  405. const tree = sheet.zh_tree;
  406. if (!tree) { return }
  407. const node = tree.getItems(id);
  408. if (!node) { return }
  409. const index = tree.nodes.indexOf(node);
  410. const sels = sheet.getSelections();
  411. sheet.setSelection(index, sels[0].col, 1, 1);
  412. sheet.showRow(index, spreadNS.VerticalPosition.center);
  413. },
  414. CellType: {
  415. /**
  416. * 获取树结构CellType
  417. * 通过SpreadJsObj.loadSheetData(sheet, 'tree', tree)加载树结构数据
  418. * 要求tree类型为PathTree, 节点必须含有{id, pid, level, order, is_leaf}数据
  419. * @returns {TreeNodeCellType}
  420. */
  421. getTreeNodeCellType: function () {
  422. const indent = 20;
  423. const levelIndent = -5;
  424. const halfBoxLength = 5;
  425. const halfExpandLength = 3;
  426. /**
  427. * 画一条线段
  428. * @param canvas - 画布
  429. * @param x1 - 线段起点 x
  430. * @param y1 - 线段起点 y
  431. * @param x2 - 线段终点 x
  432. * @param y2 - 线段终点 y
  433. * @param color - 线段颜色
  434. */
  435. const drawLine = function (canvas, x1, y1, x2, y2, color) {
  436. canvas.save();
  437. // 设置偏移量
  438. canvas.translate(0.5, 0.5);
  439. canvas.beginPath();
  440. canvas.moveTo(x1, y1);
  441. canvas.lineTo(x2, y2);
  442. canvas.strokeStyle = color;
  443. canvas.stroke();
  444. canvas.restore();
  445. };
  446. /**
  447. * 画一个方框
  448. * @param {Object} canvas - 画布
  449. * @param {Object} rect - 方框区域
  450. * @param {String} lineColor - 画线颜色
  451. * @param {String} fillColor - 填充颜色
  452. */
  453. const drawBox = function (canvas, rect, lineColor, fillColor) {
  454. canvas.save();
  455. // 设置偏移量
  456. canvas.translate(0.5, 0.5);
  457. canvas.strokeStyle = lineColor;
  458. canvas.beginPath();
  459. canvas.moveTo(rect.left, rect.top);
  460. canvas.lineTo(rect.left, rect.bottom);
  461. canvas.lineTo(rect.right, rect.bottom);
  462. canvas.lineTo(rect.right, rect.top);
  463. canvas.lineTo(rect.left, rect.top);
  464. canvas.stroke();
  465. canvas.fillStyle = fillColor;
  466. canvas.fill();
  467. canvas.restore();
  468. };
  469. /**
  470. * 画树结构-展开收起按钮
  471. * @param {Object} canvas - 画布
  472. * @param {Number} x - 单元格左顶点坐标 x
  473. * @param {Number} y - 单元格左顶点坐标 y
  474. * @param {Number} w - 单元格宽度
  475. * @param {Number} h - 单元格高度
  476. * @param {Number} centerX - 按钮中央坐标
  477. * @param {Number} centerY - 按钮中央坐标
  478. * @param {Boolean} expanded - 当前节点展开收起状态
  479. */
  480. const drawExpandBox = function (canvas, x, y, w, h, centerX, centerY, expanded) {
  481. let rect = {
  482. top: centerY - halfBoxLength,
  483. bottom: centerY + halfBoxLength,
  484. left: centerX - halfBoxLength,
  485. right: centerX + halfBoxLength
  486. };
  487. let h1, h2, offset = 1;
  488. if (rect.left < x + w) {
  489. // 方框超出单元格宽度时,超出部分不画。
  490. rect.right = Math.min(rect.right, x + w);
  491. drawBox(canvas, rect, 'black', 'white');
  492. // 画中心十字
  493. // 画十字横线
  494. h1 = centerX - halfExpandLength;
  495. h2 = Math.min(centerX + halfExpandLength, x + w);
  496. if (h2 > h1) {
  497. drawLine(canvas, h1, centerY, h2, centerY, 'black');
  498. }
  499. // 画十字竖线
  500. if (!expanded && (centerX < x + w)) {
  501. drawLine(canvas, centerX, centerY - halfExpandLength, centerX, centerY + halfExpandLength, 'black');
  502. }
  503. }
  504. };
  505. let TreeNodeCellType = function (){};
  506. TreeNodeCellType.prototype = new spreadNS.CellTypes.Text();
  507. const proto = TreeNodeCellType.prototype;
  508. /**
  509. * 绘制方法
  510. * @param {Object} canvas - 画布
  511. * @param value - cell.value
  512. * @param {Number} x - 单元格左顶点坐标 x
  513. * @param {Number} y - 单元格左顶点坐标 y
  514. * @param {Number} w - 单元格宽度
  515. * @param {Number} h - 单元格高度
  516. * @param {Object} style - cell.style
  517. * @param {Object} options
  518. */
  519. proto.paint = function (canvas, value, x, y, w, h, style, options) {
  520. // 清理 画布--单元格范围 旧数据
  521. if (style.backColor) {
  522. canvas.save();
  523. canvas.fillStyle = style.backColor;
  524. canvas.fillRect(x, y, w, h);
  525. canvas.restore();
  526. } else {
  527. canvas.clearRect(x, y, w, h);
  528. }
  529. const tree = options.sheet.zh_tree;
  530. // 使用TreeCellType前,需定义sheet.tree
  531. if (tree) {
  532. const node = options.row < tree.nodes.length ? tree.nodes[options.row] : null;
  533. if (node) {
  534. const showTreeLine = true;
  535. const centerX = Math.floor(x) + (node.level) * indent + (node.level) * levelIndent + indent / 2;
  536. const centerY = Math.floor((y + (y + h)) / 2);
  537. // Draw Sibling Line
  538. if (showTreeLine) {
  539. // Draw Horizontal Line
  540. if (centerX < x + w) {
  541. const x1 = centerX + indent / 2;
  542. drawLine(canvas, centerX, centerY, Math.min(x1, x + w), centerY, 'gray');
  543. }
  544. // Draw Vertical Line
  545. if (centerX < x + w) {
  546. const y1 = tree.isLastSibling(node) ? centerY : y + h;
  547. const parent = tree.getParent(node);
  548. const y2 = y1 - centerY;
  549. if (node.order === 1 && !parent) {
  550. drawLine(canvas, centerX, centerY, centerX, y1, 'gray');
  551. } else {
  552. drawLine(canvas, centerX, y, centerX, y1, 'gray');
  553. }
  554. }
  555. }
  556. // Draw Expand Box
  557. if (!node.is_leaf) {
  558. drawExpandBox(canvas, x, y, w, h, centerX, centerY, node.expanded);
  559. }
  560. // Draw Parent Line
  561. if (showTreeLine) {
  562. let parent = tree.getParent(node), parentCenterX = centerX - indent - levelIndent;
  563. while (parent) {
  564. if (!tree.isLastSibling(parent)) {
  565. if (parentCenterX < x + w) {
  566. drawLine(canvas, parentCenterX, y, parentCenterX, y + h, 'gray');
  567. }
  568. }
  569. parent = tree.getParent(parent);
  570. parentCenterX -= (indent + levelIndent);
  571. }
  572. };
  573. // 重定位x
  574. x = x + (node.level + 1) * indent + (node.level) * levelIndent;
  575. w = w - (node.level - 1) * indent - (node.level) * levelIndent;
  576. }
  577. }
  578. // Drawing Text
  579. spreadNS.CellTypes.Text.prototype.paint.apply(this, arguments);
  580. };
  581. /**
  582. * 获取点击信息
  583. * @param {Number} x
  584. * @param {Number} y
  585. * @param {Object} cellStyle
  586. * @param {Object} cellRect
  587. * @param {Object} context
  588. * @returns {{x: *, y: *, row: *, col: *|boolean|*[]|number|{}|UE.dom.dtd.col, cellStyle: *, cellRect: *, sheet: *|StyleSheet, sheetArea: *}}
  589. */
  590. proto.getHitInfo = function (x, y, cellStyle, cellRect, context) {
  591. return {
  592. x: x,
  593. y: y,
  594. row: context.row,
  595. col: context.col,
  596. cellStyle: cellStyle,
  597. cellRect: cellRect,
  598. sheet: context.sheet,
  599. sheetArea: context.sheetArea
  600. };
  601. };
  602. /**
  603. * 鼠标点击 树结构按钮 响应展开收起(未加载子节点时,先加载子节点)
  604. * @param {Object} hitinfo - 见getHitInfo
  605. */
  606. proto.processMouseDown = function (hitinfo) {
  607. const offset = -1;
  608. const tree = hitinfo.sheet.zh_tree;
  609. if (!tree) { return; }
  610. const node = tree.nodes[hitinfo.row];
  611. if (!node) { return; }
  612. let centerX = hitinfo.cellRect.x + offset + (node.level) * indent + (node.level) * levelIndent + indent / 2;
  613. let centerY = (hitinfo.cellRect.y + offset + (hitinfo.cellRect.y + offset + hitinfo.cellRect.height)) / 2;
  614. // 点击展开节点时,如果已加载子项,则展开,反之这加载子项,展开
  615. if (Math.abs(hitinfo.x - centerX) < halfBoxLength && Math.abs(hitinfo.y - centerY) < halfBoxLength) {
  616. const children = tree.getChildren(node);
  617. if (!node.expanded && !node.is_leaf && children.length === 0 && tree.loadChildren) {
  618. tree.loadChildren(node, function () {
  619. node.expanded = true;
  620. const children = tree.getChildren(node);
  621. hitinfo.sheet.addRows(hitinfo.row + 1, children.length);
  622. SpreadJsObj.reLoadRowData(hitinfo.sheet, hitinfo.row + 1, children.length);
  623. });
  624. } else {
  625. tree.setExpanded(node, !node.expanded);
  626. SpreadJsObj.massOperationSheet(hitinfo.sheet, function () {
  627. const posterity = tree.getPosterity(node);
  628. for (const child of posterity) {
  629. hitinfo.sheet.setRowVisible(tree.nodes.indexOf(child), child.visible, hitinfo.sheetArea);
  630. }
  631. });
  632. hitinfo.sheet.repaint();
  633. }
  634. }
  635. };
  636. return new TreeNodeCellType();
  637. },
  638. /**
  639. * 获取带悬浮提示CellType
  640. * @returns {TipCellType}
  641. */
  642. getTipCellType: function () {
  643. const TipCellType = function () {};
  644. // 继承 SpreadJs定义的 普通的TextCellType
  645. TipCellType.prototype = new spreadNS.CellTypes.Text();
  646. const proto = TipCellType.prototype;
  647. /**
  648. * 获取点击信息
  649. * @param {Number} x
  650. * @param {Number} y
  651. * @param {Object} cellStyle
  652. * @param {Object} cellRect
  653. * @param {Object} context
  654. * @returns {{x: *, y: *, row: *, col: *|boolean|*[]|number|{}|UE.dom.dtd.col, cellStyle: *, cellRect: *, sheet: *|StyleSheet, sheetArea: *}}
  655. */
  656. proto.getHitInfo = function (x, y, cellStyle, cellRect, context) {
  657. return {
  658. x: x,
  659. y: y,
  660. row: context.row,
  661. col: context.col,
  662. cellStyle: cellStyle,
  663. cellRect: cellRect,
  664. sheet: context.sheet,
  665. sheetArea: context.sheetArea
  666. };
  667. };
  668. /**
  669. * 鼠标进入单元格事件 - 显示悬浮提示
  670. * @param {Object} hitinfo - 见getHitInfo返回值
  671. */
  672. proto.processMouseEnter = function (hitinfo) {
  673. const text = hitinfo.sheet.getText(hitinfo.row, hitinfo.col);
  674. const setting = hitinfo.sheet.setting;
  675. if (setting.pos && text && text !== '') {
  676. if (!this._toolTipElement) {
  677. let div = $('#autoTip')[0];
  678. if (!div) {
  679. div = document.createElement("div");
  680. $(div).css("position", "absolute")
  681. .css("border", "1px #C0C0C0 solid")
  682. .css("box-shadow", "1px 2px 5px rgba(0,0,0,0.4)")
  683. .css("font", "9pt Arial")
  684. .css("background", "white")
  685. .css("padding", 5)
  686. .attr("id", 'autoTip');
  687. $(div).hide();
  688. document.body.insertBefore(div, null);
  689. }
  690. this._toolTipElement = div;
  691. $(this._toolTipElement).text(text).css("top", setting.pos.y + hitinfo.y + 15).css("left", setting.pos.x + hitinfo.x + 15);
  692. $(this._toolTipElement).show("fast");
  693. }
  694. }
  695. };
  696. /**
  697. * 鼠标移出单元格事件 - 隐藏悬浮提示
  698. * @param {Object} hitinfo - 见getHitInfo返回值
  699. */
  700. proto.processMouseLeave = function (hitinfo) {
  701. if (this._toolTipElement) {
  702. $(this._toolTipElement).hide();
  703. this._toolTipElement = null;
  704. }
  705. };
  706. return new TipCellType();
  707. }
  708. }
  709. };