spreadjs_zh.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
  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.Workbook} spread
  130. * @param {function} fun
  131. */
  132. addDeleteBind: function (spread, fun) {
  133. spread.commandManager().register('deleteEvent', function () {
  134. fun(spread.getActiveSheet());
  135. });
  136. spread.commandManager().setShortcutKey('null', GC.Spread.Commands.Key.del, false, false, false, false);
  137. spread.commandManager().setShortcutKey('deleteEvent', GC.Spread.Commands.Key.del, false, false, false, false);
  138. },
  139. /**
  140. * 根据sheet.zh_setting初始化sheet表头
  141. * @param {GC.Spread.Sheets.Worksheet} sheet
  142. */
  143. initSheetHeader: function (sheet) {
  144. if (!sheet.zh_setting) { return; }
  145. this.massOperationSheet(sheet, function () {
  146. sheet.setColumnCount(sheet.zh_setting.cols.length);
  147. for (const i in sheet.zh_setting.cols) {
  148. const col = sheet.zh_setting.cols[i];
  149. const cell = sheet.getCell(0, i, GC.Spread.Sheets.SheetArea.colHeader);
  150. cell.text(col.title);
  151. sheet.setColumnWidth(i, col.width);
  152. }
  153. sheet.rowOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.backward);
  154. sheet.showRowOutline(false);
  155. if (sheet.zh_setting.defaultRowHeight) {
  156. sheet.defaults.rowHeight = sheet.zh_setting.defaultRowHeight;
  157. }
  158. });
  159. },
  160. /**
  161. * 初始化sheet, 设置sheet.zh_setting, 并初始化表头
  162. * @param {GC.Spread.Sheets.Worksheet} sheet
  163. * @param setting
  164. */
  165. initSheet: function (sheet, setting) {
  166. sheet.zh_setting = setting;
  167. this.initSheetHeader(sheet);
  168. sheet.setRowCount(sheet.zh_setting.emptyRows);
  169. sheet.extendCellType = {};
  170. },
  171. /**
  172. * 整个sheet重新加载数据
  173. * @param sheet
  174. */
  175. reLoadSheetData: function (sheet) {
  176. this.protectedSheet(sheet);
  177. this.massOperationSheet(sheet, function () {
  178. // 设置总行数
  179. const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
  180. const totalRow = sortData.length + sheet.zh_setting.emptyRows;
  181. sheet.setRowCount(totalRow, GC.Spread.Sheets.SheetArea.viewport);
  182. // 控制空白行
  183. const emptyRows = sheet.getRange(sortData.length, -1, sheet.zh_setting.emptyRows, -1);
  184. emptyRows.locked(sheet.zh_dataType === 'tree');
  185. // 单元格写入数据
  186. sortData.forEach(function (data, i) {
  187. sheet.zh_setting.cols.forEach(function (col, j) {
  188. const cell = sheet.getCell(i, j);
  189. if (col.field !== '' && data[col.field]) {
  190. cell.value(data[col.field]).locked(col.readOnly || false);
  191. } else {
  192. cell.locked(col.readOnly || false);
  193. }
  194. });
  195. });
  196. // 设置列单元格格式
  197. sheet.zh_setting.cols.forEach(function (col, j) {
  198. if (!col.cellType) { return; }
  199. if (col.cellType === 'tree') {
  200. if (!sheet.extendCellType.tree) {
  201. sheet.extendCellType.tree = SpreadJsExtendCellType.getTreeNodeCellType();
  202. }
  203. sheet.getRange(-1, j, -1, 1).cellType(sheet.extendCellType.tree);
  204. } else if (col.cellType === 'tip') {
  205. if (!sheet.extendCellType.tip) {
  206. sheet.extendCellType.tip = SpreadJsExtendCellType.getTipCellType();
  207. }
  208. sheet.getRange(-1, j, -1, 1).cellType(sheet.extendCellType.tip);
  209. }
  210. });
  211. });
  212. },
  213. /**
  214. * 重新加载部分数据行
  215. * @param {GC.Spread.Sheets.Worksheet} sheet
  216. * @param {Number} row
  217. * @param {Number} count
  218. */
  219. reLoadRowData: function (sheet, row, count) {
  220. this.massOperationSheet(sheet, function () {
  221. const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
  222. // 清空原单元格数据
  223. sheet.clear(row, -1, count, -1, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.StorageType.data);
  224. // 单元格重新写入数据
  225. for (let i = row; i < row + count; i++) {
  226. const data = sortData[i];
  227. if (!data) { continue; }
  228. sheet.zh_setting.cols.forEach(function (col, j) {
  229. const cell = sheet.getCell(i, j);
  230. if (col.field !== '' && data[col.field]) {
  231. cell.value(data[col.field]).locked(col.readOnly || false);
  232. } else {
  233. cell.locked(col.readOnly || false);
  234. }
  235. });
  236. };
  237. // 设置列单元格格式
  238. sheet.zh_setting.cols.forEach(function (col, j) {
  239. if (!col.cellType) { return; }
  240. if (col.cellType === 'tree') {
  241. if (!sheet.extendCellType.tree) {
  242. sheet.extendCellType.tree = SpreadJsExtendCellType.getTreeNodeCellType();
  243. }
  244. sheet.getRange(row, j, count, 1).cellType(sheet.extendCellType.tree);
  245. } else if (col.cellType === 'tip') {
  246. if (!sheet.extendCellType.tip) {
  247. sheet.extendCellType.tip = SpreadJsExtendCellType.getTipCellType();
  248. }
  249. sheet.getRange(row, j, count, 1).cellType(sheet.extendCellType.tip);
  250. }
  251. });
  252. });
  253. },
  254. /**
  255. * 重新加载部分行数据
  256. * @param {GC.Spread.Sheets.Worksheet} sheet
  257. * @param {Array} rows
  258. */
  259. reLoadRowsData: function (sheet, rows) {
  260. this.massOperationSheet(sheet, function () {
  261. const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
  262. for (const row of rows) {
  263. // 清空原单元格数据
  264. sheet.clear(row, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.StorageType.data);
  265. const data = sortData[row];
  266. // 单元格重新写入数据
  267. sheet.zh_setting.cols.forEach(function (col, j) {
  268. // 设置值
  269. const cell = sheet.getCell(row, j);
  270. if (col.field !== '' && data[col.field]) {
  271. cell.value(data[col.field]).locked(col.readOnly || false);
  272. } else {
  273. cell.locked(col.readOnly || false);
  274. }
  275. // 设置单元格格式
  276. if (col.cellType) {
  277. if (col.cellType === 'tree') {
  278. if (!sheet.extendCellType.tree) {
  279. sheet.extendCellType.tree = SpreadJsExtendCellType.getTreeNodeCellType();
  280. }
  281. sheet.getRange(row, j, 1, 1).cellType(sheet.extendCellType.tree);
  282. } else if (col.cellType === 'tip') {
  283. if (!sheet.extendCellType.tip) {
  284. sheet.extendCellType.tip = SpreadJsExtendCellType.getTipCellType();
  285. }
  286. sheet.getRange(row, j, 1, 1).cellType(sheet.extendCellType.tip);
  287. }
  288. }
  289. });
  290. };
  291. });
  292. },
  293. /**
  294. * 根据data加载sheet数据,合并了一般数据和树结构数据的加载
  295. * @param {GC.Spread.Sheets.Worksheet} sheet
  296. * @param {String} dataType - 1.'zh_data' 2.'zh_tree'
  297. * @param {Array|PathTree} data - 对dataType对应
  298. */
  299. loadSheetData: function (sheet, dataType, data){
  300. sheet.zh_dataType = dataType;
  301. if (dataType === 'tree') {
  302. sheet.zh_tree = data;
  303. } else {
  304. sheet.zh_data = data;
  305. }
  306. this.reLoadSheetData(sheet);
  307. },
  308. /**
  309. * 获取复制数据HTML格式(过滤不可见单元格)
  310. * @param {GC.Spread.Sheets.Worksheet} sheet
  311. * @returns {string}
  312. */
  313. getFilterCopyHTML: function (sheet) {
  314. const sel = sheet.getSelections()[0];
  315. const html = [];
  316. html.push('<table>');
  317. for (let i = sel.row, iLen = sel.row + sel.rowCount; i < iLen; i++) {
  318. // 跳过隐藏行
  319. if (!sheet.getCell(i, -1).visible()) { continue; }
  320. const rowHtml = [];
  321. rowHtml.push('<tr>');
  322. for (let j = sel.col, jLen = sel.col + sel.colCount; j < jLen; j++) {
  323. const data = sheet.getText(i, j);
  324. rowHtml.push('<td>' + data + '</td>');
  325. }
  326. rowHtml.push('</tr>');
  327. html.push(rowHtml.join(''));
  328. }
  329. html.push('</table>');
  330. return html.join('');
  331. },
  332. /**
  333. * 获取复制数据Text格式(过滤不可见单元格)
  334. * @param {GC.Spread.Sheets.Worksheet} sheet
  335. * @returns {string}
  336. */
  337. getFilterCopyText: function (sheet) {
  338. const copyData = [];
  339. const sel = sheet.getSelections()[0];
  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 rowText = [];
  344. for (let j = sel.col, jLen = sel.col + sel.colCount; j < jLen; j++) {
  345. const data = sheet.getText(i, j);
  346. rowText.push(data);
  347. }
  348. copyData.push(rowText.join('\t'));
  349. }
  350. return copyData.join('\n');
  351. }
  352. };