spreadjs_zh.js 29 KB

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