spreadjs_zh.js 62 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423
  1. /**
  2. * Spreadjs 通用方法集
  3. *
  4. * @author Mai
  5. * @date 2018/02/06
  6. * @version
  7. */
  8. // 定义画点线的方法
  9. const proto = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
  10. proto.dottedLine = function (x1, y1, x2, y2, interval = 4) {
  11. const isHorizontal = x1 == x2 ? false : true;
  12. const dotLen = 1;
  13. let len = isHorizontal ? x2 - x1 : y2 - y1;
  14. this.moveTo(x1, y1);
  15. let progress = 0;
  16. while (len > progress) {
  17. if (progress > len) { progress = len; }
  18. if (isHorizontal) {
  19. this.moveTo(x1 + progress, y1);
  20. this.lineTo(x1 + progress + dotLen, y1);
  21. } else {
  22. this.moveTo(x1, y1 + progress);
  23. this.lineTo(x1, y1 + progress + dotLen);
  24. }
  25. progress += interval;
  26. }
  27. };
  28. // 简写Spread常量
  29. const spreadNS = GC.Spread.Sheets;
  30. // 授权码
  31. spreadNS.LicenseKey = "559432293813965#A0y3iTOzEDOzkjMyMDN9UTNiojIklkI1pjIEJCLi4TPB9mM5AFNTd4cvZ7SaJUVy3CWKtWYXx4VVhjMpp7dYNGdx2ia9sEVlZGOTh7NRlTUwkWR9wEV4gmbjBDZ4ElR8N7cGdHVvEWVBtCOwIGW0ZmeYVWVr3mI0IyUiwCMzETN8kzNzYTM0IicfJye&Qf35VfiEzRwEkI0IyQiwiIwEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsIyNyMzM5ADI5ADNwcTMwIjI0ICdyNkIsIibj9SbvNmL4N7bjRnch56ciojIz5GRiwiI8+Y9sWY9QmZ0Jyp96uL9v6L0wap9biY9qiq95q197Wr9g+89iojIh94Wiqi";
  32. // SpreadJs常用方法
  33. const SpreadJsObj = {
  34. initSpreadSettingEvents: function (setting, events) {
  35. const getEvent = function (eventName) {
  36. const names = eventName.split('.');
  37. let event = events;
  38. for (let name of names) {
  39. if (event[name]) {
  40. event = event[name];
  41. } else {
  42. return null;
  43. }
  44. }
  45. if (event && Object.prototype.toString.apply(event) !== "[object Function]") {
  46. return null;
  47. } else {
  48. return event;
  49. }
  50. };
  51. for (const col of setting.cols) {
  52. if (col.readOnly && Object.prototype.toString.apply(col.readOnly) === "[object String]") {
  53. col.readOnly = getEvent(col.readOnly);
  54. }
  55. if (col.getValue && Object.prototype.toString.apply(col.getValue) === "[object String]") {
  56. col.getValue = getEvent(col.getValue);
  57. }
  58. }
  59. },
  60. DataType: {
  61. Data: 'data',
  62. Tree: 'tree',
  63. },
  64. /**
  65. * 创建Spread(默认1张表,3行数据)
  66. * @param obj 用于创建spreadjs的Dom元素
  67. * @returns {GC.Spread.Sheets.Workbook}
  68. */
  69. createNewSpread: function (obj) {
  70. const spread = new spreadNS.Workbook(obj, {sheetCount: 1});
  71. spread.options.tabStripVisible = false;
  72. spread.options.scrollbarMaxAlign = true;
  73. spread.options.cutCopyIndicatorVisible = false;
  74. spread.options.allowCopyPasteExcelStyle = false;
  75. spread.options.allowUserDragDrop = false;
  76. spread.options.allowUserEditFormula = false;
  77. spread.getActiveSheet().options.clipBoardOptions = GC.Spread.Sheets.ClipboardPasteOptions.values;//设置粘贴时只粘贴值
  78. spread.getActiveSheet().setRowCount(3);
  79. return spread;
  80. },
  81. /**
  82. * 保护sheet(需设置保护后, 单元格的locked等属性方可生效)
  83. * @param {GC.Spread.Sheets.Worksheet} sheet
  84. */
  85. protectedSheet: function (sheet) {
  86. const option = {
  87. allowSelectLockedCells: true,
  88. allowSelectUnlockedCells: true,
  89. allowResizeRows: true,
  90. allowResizeColumns: true
  91. };
  92. sheet.options.protectionOptions = option;
  93. sheet.options.isProtected = true;
  94. sheet.options.allowCellOverflow = false;
  95. },
  96. /**
  97. * sheet批量操作优化(sheet操作大批量数据时, 屏蔽数据刷新, 可优化大量时间)
  98. * @param {GC.Spread.Sheets.Worksheet} sheet
  99. * @param {function} operation
  100. */
  101. beginMassOperation: function (sheet) {
  102. sheet.suspendPaint();
  103. sheet.suspendEvent();
  104. },
  105. endMassOperation: function (sheet) {
  106. sheet.resumeEvent();
  107. sheet.resumePaint();
  108. },
  109. massOperationSheet: function (sheet, operation) {
  110. this.beginMassOperation(sheet);
  111. operation();
  112. this.endMassOperation(sheet);
  113. },
  114. /**
  115. * 获取Obj左顶点位置(部分功能需通过spreadjs左顶点位置计算)
  116. * @param obj
  117. * @returns {{x: number, y: number}}
  118. */
  119. getObjPos: function (obj) {
  120. let target = obj;
  121. let pos = {x: obj.offsetLeft, y: obj.offsetTop};
  122. target = obj.offsetParent;
  123. while (target) {
  124. pos.x += target.offsetLeft;
  125. pos.y += target.offsetTop;
  126. target = target.offsetParent;
  127. }
  128. return pos;
  129. },
  130. /**
  131. * 以下四个方法来自Spread示例, 参见官网或文档
  132. */
  133. getHitTest: function (obj, e, sheet) {
  134. var offset = obj.offset(),
  135. x = e.pageX - offset.left,
  136. y = e.pageY - offset.top;
  137. return sheet.hitTest(x, y);
  138. },
  139. getTargetSelection: function (sheet, target) {
  140. if (target.hitTestType === spreadNS.SheetArea.colHeader) {
  141. return sheet.getRange(-1, target.col, sheet.getRowCount(), 1);
  142. } else if (target.hitTestType === spreadNS.SheetArea.rowHeader) {
  143. return sheet.getRange(target.row, -1, 1, sheet.getColumnCount());
  144. } else if (target.hitTestType === spreadNS.SheetArea.viewport) {
  145. return sheet.getRange(target.row, target.col, 1, 1);
  146. } else if (target.hitTestType === spreadNS.SheetArea.corner) {
  147. return sheet.getRange(-1, -1, sheet.getRowCount(), sheet.getColumnCount());
  148. };
  149. },
  150. getCellInSelections: function (selections, row, col) {
  151. const count = selections.length;
  152. let range;
  153. for (var i = 0; i < count; i++) {
  154. range = selections[i];
  155. if (range.contains(row, col)) {
  156. return range;
  157. }
  158. }
  159. return null;
  160. },
  161. checkTargetInSelection: function (selections, range) {
  162. var count = selections.length, sel;
  163. for (var i = 0; i < count; i++) {
  164. sel = selections[i];
  165. if (sel.containsRange(range)) {
  166. return true;
  167. }
  168. }
  169. return false;
  170. },
  171. /**
  172. * 获取 spread 在鼠标右键时, spread的选中区域
  173. * viewport, 选中鼠标点击单元格X, X不在原选中区域内, 则选中X
  174. * colHeader, 选中整列
  175. * rowHeader, 选中整行
  176. * corner, 全选
  177. * 该方法返回不符合需求时,可通过getHitTest/getTargetSelection/getCellInSelections/checkTargetInSelection来确定鼠标右键点击时,spread当前Sheet应选中的单元格
  178. * @param obj: 创建Spread的Dom元素(jquery-contextmenu.build方法的第一个变量可读取)
  179. * @param e: jquery-contextmenu.build方法的第二个变量
  180. * @param {GC.Spread.Sheets.Workbook} spread
  181. * @returns {*}
  182. */
  183. safeRightClickSelection: function (obj, e, spread) {
  184. const sheet = spread.getActiveSheet();
  185. const selections = sheet.getSelections(), target = this.getHitTest(obj, e, sheet), range = this.getTargetSelection(sheet, target);
  186. if (!this.checkTargetInSelection(selections, range)) {
  187. sheet.setSelection(range.row, range.col, range.rowCount, range.colCount);
  188. }
  189. return target;
  190. },
  191. /**
  192. * 获取写入sheet的数据序列
  193. * data:sheet.zh_data, tree: sheet.zh_tree.nodes
  194. * @param sheet
  195. * @returns {*}
  196. */
  197. getSortData: function (sheet) {
  198. if (sheet.zh_dataType) {
  199. if (sheet.zh_dataType === this.DataType.Data) {
  200. return sheet.zh_data;
  201. } else if (sheet.zh_dataType === this.DataType.Tree) {
  202. return sheet.zh_tree.nodes;
  203. } else {
  204. return null;
  205. }
  206. } else {
  207. return null;
  208. }
  209. },
  210. /**
  211. * sheet中 使用delete键,触发EndEdited事件
  212. * @param {GC.Spreads.Sheets.Workbook} spread
  213. * @param {function} fun
  214. */
  215. addDeleteBind: function (spread, fun) {
  216. spread.commandManager().register('deleteEvent', function () {
  217. fun(spread.getActiveSheet());
  218. });
  219. spread.commandManager().setShortcutKey(null, GC.Spread.Commands.Key.del, false, false, false, false);
  220. spread.commandManager().setShortcutKey('deleteEvent', GC.Spread.Commands.Key.del, false, false, false, false);
  221. },
  222. _initSheetDeafult: function (sheet) {
  223. if (sheet.zh_setting.headerFont) {
  224. const vStyle = new spreadNS.Style();
  225. vStyle.font = sheet.zh_setting.headerFont;
  226. sheet.setDefaultStyle(vStyle, spreadNS.SheetArea.colHeader);
  227. }
  228. if (sheet.zh_setting.font) {
  229. const vStyle = new spreadNS.Style();
  230. vStyle.font = sheet.zh_setting.font;
  231. sheet.setDefaultStyle(vStyle, spreadNS.SheetArea.viewport);
  232. }
  233. },
  234. /**
  235. * 根据sheet.zh_setting初始化sheet表头
  236. * @param {GC.Spread.Sheets.Worksheet} sheet
  237. */
  238. _initSheetHeader: function (sheet) {
  239. if (!sheet.zh_setting) { return; }
  240. sheet.setColumnCount(sheet.zh_setting.cols.length);
  241. sheet.setRowCount(sheet.zh_setting.headRows, spreadNS.SheetArea.colHeader);
  242. for (let iRow = 0; iRow < sheet.zh_setting.headRowHeight.length; iRow ++) {
  243. sheet.setRowHeight(iRow, sheet.zh_setting.headRowHeight[iRow], spreadNS.SheetArea.colHeader);
  244. }
  245. for (let iCol = 0; iCol < sheet.zh_setting.cols.length; iCol++) {
  246. const col = sheet.zh_setting.cols[iCol];
  247. const title = col.title.split('|');
  248. const colSpan = col.colSpan ? col.colSpan.split('|'): ['1'], rowSpan = col.rowSpan ? col.rowSpan.split('|'): ['1'];
  249. for (let i = 0; i < title.length; i++) {
  250. const cell = sheet.getCell(i, iCol, spreadNS.SheetArea.colHeader);
  251. cell.text(title[i]).wordWrap(true);
  252. if ((colSpan[i] !== '' && colSpan[i] !== '1') || (rowSpan[i] !== '' && rowSpan[i] !== '1')) {
  253. sheet.addSpan(i, iCol, parseInt(rowSpan[i]), parseInt(colSpan[i]), spreadNS.SheetArea.colHeader);
  254. }
  255. }
  256. sheet.setColumnWidth(iCol, col.width);
  257. if (col.visible !== undefined && col.visible !== null) {
  258. sheet.setColumnVisible(iCol, col.visible);
  259. }
  260. }
  261. sheet.rowOutlines.direction(spreadNS.Outlines.OutlineDirection.backward);
  262. sheet.showRowOutline(false);
  263. if (sheet.zh_setting.defaultRowHeight) {
  264. sheet.defaults.rowHeight = sheet.zh_setting.defaultRowHeight;
  265. }
  266. },
  267. /**
  268. * 初始化sheet, 设置sheet.zh_setting, 并初始化表头
  269. * @param {GC.Spread.Sheets.Worksheet} sheet
  270. * @param setting
  271. */
  272. initSheet: function (sheet, setting) {
  273. this.beginMassOperation(sheet);
  274. sheet.zh_setting = setting;
  275. this._initSheetDeafult(sheet);
  276. this._initSheetHeader(sheet);
  277. sheet.setRowCount(sheet.zh_setting.emptyRows);
  278. sheet.extendCellType = {};
  279. sheet.getRange(0, 0, sheet.getRowCount(), sheet.getColumnCount()).locked(setting.readOnly);
  280. this.endMassOperation(sheet);
  281. },
  282. _loadRowData: function (sheet, data, row) {
  283. // 单元格重新写入数据
  284. if (!data) { return }
  285. sheet.zh_setting.cols.forEach(function (col, j) {
  286. const cell = sheet.getCell(row, j);
  287. if (col.getValue && Object.prototype.toString.apply(col.getValue) === "[object Function]") {
  288. cell.value(col.getValue(data));
  289. } else if (col.field !== '' && data[col.field]) {
  290. cell.value(data[col.field]);
  291. }
  292. if (col.font) {
  293. cell.font(col.font);
  294. }
  295. if (col.foreColor) {
  296. if (Object.prototype.toString.apply(col.foreColor) === "[object Function]") {
  297. cell.foreColor(col.foreColor(data, sheet.getDefaultStyle().foreColor));
  298. } else {
  299. cell.foreColor(col.foreColor);
  300. }
  301. }
  302. if (col.readOnly && Object.prototype.toString.apply(col.readOnly) === "[object Function]") {
  303. cell.locked(col.readOnly(data) || sheet.zh_setting.readOnly || false).vAlign(1).hAlign(col.hAlign);
  304. } else {
  305. cell.locked(col.readOnly || sheet.zh_setting.readOnly || false).vAlign(1).hAlign(col.hAlign);
  306. }
  307. if (col.formatter) {
  308. cell.formatter(col.formatter);
  309. }
  310. if (sheet.zh_setting.getColor && Object.prototype.toString.apply(sheet.zh_setting.getColor) === "[object Function]") {
  311. cell.backColor(sheet.zh_setting.getColor(data, col, sheet.getDefaultStyle().backColor));
  312. }
  313. });
  314. },
  315. _defineColCellType: function (sheet, col, colSetting) {
  316. if(colSetting.cellType === 'ellipsis') {
  317. if (!sheet.extendCellType.ellipsis) {
  318. sheet.extendCellType.ellipsis = this.CellType.getEllipsisTextCellType();
  319. }
  320. sheet.getRange(-1, col, -1, 1).cellType(sheet.extendCellType.ellipsis);
  321. }
  322. if(colSetting.cellType === 'html') {
  323. if (!sheet.extendCellType.html) {
  324. sheet.extendCellType.html = this.CellType.getHtmlCellType();
  325. }
  326. sheet.getRange(-1, col, -1, 1).cellType(sheet.extendCellType.html);
  327. }
  328. if (colSetting.cellType === 'image') {
  329. if (!sheet.extendCellType.image) {
  330. sheet.extendCellType.image = this.CellType.getImageCellType();
  331. }
  332. sheet.getRange(-1, col, -1, 1).cellType(sheet.extendCellType.image);
  333. }
  334. if (colSetting.cellType === 'imageBtn') {
  335. if (!sheet.extendCellType.image) {
  336. sheet.extendCellType.imageBtn = this.CellType.getImageButtonCellType();
  337. }
  338. sheet.getRange(-1, col, -1, 1).cellType(sheet.extendCellType.imageBtn);
  339. }
  340. if (colSetting.cellType === 'tree') {
  341. if (!sheet.extendCellType.tree) {
  342. sheet.extendCellType.tree = this.CellType.getTreeNodeCellType();
  343. }
  344. sheet.getRange(-1, col, -1, 1).cellType(sheet.extendCellType.tree);
  345. }
  346. if (colSetting.cellType === 'tip') {
  347. if (!sheet.extendCellType.tip) {
  348. sheet.extendCellType.tip = this.CellType.getTipCellType();
  349. }
  350. sheet.getRange(-1, col, -1, 1).cellType(sheet.extendCellType.tip);
  351. }
  352. if (colSetting.cellType === 'checkbox') {
  353. if (!sheet.extendCellType.checkbox) {
  354. sheet.extendCellType.checkbox = new spreadNS.CellTypes.CheckBox();
  355. }
  356. sheet.getRange(-1, col, -1, 1).cellType(sheet.extendCellType.checkbox);
  357. }
  358. if (colSetting.cellType === 'unit') {
  359. if (!sheet.extendCellType.unit) {
  360. sheet.extendCellType.unit = this.CellType.getUnitCellType();
  361. }
  362. sheet.getRange(-1, col, -1, 1).cellType(sheet.extendCellType.unit);
  363. }
  364. if (colSetting.formatter) {
  365. sheet.getRange(-1, col, -1, 1).formatter(colSetting.formatter);
  366. }
  367. },
  368. /**
  369. * 整个sheet重新加载数据
  370. * @param {GC.Spread.Sheets.Worksheet} sheet
  371. */
  372. reLoadSheetData: function (sheet) {
  373. const self = this;
  374. const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
  375. this.beginMassOperation(sheet);
  376. try {
  377. sheet.clear(0, 0, sheet.getRowCount(), sheet.getColumnCount(), spreadNS.SheetArea.viewport, spreadNS.StorageType.data);
  378. // 设置总行数
  379. const totalRow = sortData.length + sheet.zh_setting.emptyRows;
  380. sheet.setRowCount(totalRow, spreadNS.SheetArea.viewport);
  381. // 控制空白行
  382. const emptyRows = sheet.getRange(sortData.length, -1, sheet.zh_setting.emptyRows, -1);
  383. emptyRows.locked(sheet.zh_dataType === 'tree');
  384. if (sortData) {
  385. // 单元格写入数据
  386. sortData.forEach(function (data, i) {
  387. self._loadRowData(sheet, data, i);
  388. sheet.setRowVisible(i, data.visible);
  389. });
  390. }
  391. // 设置列单元格格式
  392. sheet.zh_setting.cols.forEach(function (col, j) {
  393. //if (!col.cellType) { return; }
  394. self._defineColCellType(sheet, j, col);
  395. });
  396. this.endMassOperation(sheet);
  397. } catch (err) {
  398. this.endMassOperation(sheet);
  399. }
  400. },
  401. /**
  402. * 重新加载部分数据行
  403. * @param {GC.Spread.Sheets.Worksheet} sheet
  404. * @param {Number} row
  405. * @param {Number} count
  406. */
  407. reLoadRowData: function (sheet, row, count = 1) {
  408. //if (row < 0) { return; }
  409. const self = this;
  410. const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
  411. this.beginMassOperation(sheet);
  412. try {
  413. // 清空原单元格数据
  414. sheet.clear(row, -1, count, -1, spreadNS.SheetArea.viewport, spreadNS.StorageType.data);
  415. // 单元格重新写入数据
  416. for (let i = row; i < row + count; i++) {
  417. const data = sortData[i];
  418. if (!data) { continue; }
  419. this._loadRowData(sheet, data, i);
  420. }
  421. this.endMassOperation(sheet);
  422. } catch (err) {
  423. this.endMassOperation(sheet);
  424. }
  425. },
  426. /**
  427. * 重新加载部分行数据
  428. * @param {GC.Spread.Sheets.Worksheet} sheet
  429. * @param {Array} rows
  430. */
  431. reLoadRowsData: function (sheet, rows) {
  432. const self = this;
  433. const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
  434. this.beginMassOperation(sheet);
  435. try {
  436. for (const row of rows) {
  437. if (row < 0) { continue; }
  438. // 清空原单元格数据
  439. sheet.clear(row, -1, 1, -1, spreadNS.SheetArea.viewport, spreadNS.StorageType.data);
  440. const data = sortData[row];
  441. // 单元格重新写入数据
  442. this._loadRowData(sheet, data, row);
  443. };
  444. this.endMassOperation(sheet);
  445. } catch (err) {
  446. this.endMassOperation(sheet);
  447. }
  448. },
  449. /**
  450. * 重新加载部分列数据
  451. * @param {GC.Spread.Sheets.Worksheet} sheet
  452. * @param {Array} cols
  453. */
  454. reLoadColsData: function (sheet, cols) {
  455. const self = this;
  456. const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
  457. this.beginMassOperation(sheet);
  458. try {
  459. for (const iCol of cols) {
  460. // 清空原单元格数据
  461. sheet.clear(-1, iCol, -1, 1, spreadNS.SheetArea.viewport, spreadNS.StorageType.data);
  462. const col = sheet.zh_setting.cols[iCol];
  463. sortData.forEach(function (data, i) {
  464. // 设置值
  465. const cell = sheet.getCell(i, iCol);
  466. if (col.field !== '' && data[col.field]) {
  467. cell.value(data[col.field]).locked(col.readOnly || sheet.zh_setting.readOnly || false).vAlign(1).hAlign(col.hAlign);
  468. } else {
  469. cell.locked(col.readOnly || sheet.zh_setting.readOnly || false).vAlign(1).hAlign(col.hAlign);
  470. }
  471. // 设置单元格格式
  472. if (col.formatter) {
  473. cell.formatter(col.formatter);
  474. }
  475. });
  476. }
  477. this.endMassOperation(sheet);
  478. } catch (err) {
  479. this.endMassOperation(sheet);
  480. }
  481. },
  482. reLoadNodesData: function (sheet, nodes) {
  483. this.beginMassOperation(sheet);
  484. nodes = nodes instanceof Array ? nodes : [nodes];
  485. for (const node of nodes) {
  486. const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
  487. this._loadRowData(sheet, node, sortData.indexOf(node));
  488. }
  489. this.endMassOperation(sheet);
  490. },
  491. /**
  492. * 根据data加载sheet数据,合并了一般数据和树结构数据的加载
  493. * @param {GC.Spread.Sheets.Worksheet} sheet
  494. * @param {String} dataType - 1.'zh_data' 2.'zh_tree'
  495. * @param {Array|PathTree} data - 对dataType对应
  496. */
  497. loadSheetData: function (sheet, dataType, data){
  498. sheet.zh_dataType = dataType;
  499. if (dataType === 'tree') {
  500. sheet.zh_tree = data;
  501. } else {
  502. sheet.zh_data = data;
  503. }
  504. this.protectedSheet(sheet);
  505. this.reLoadSheetData(sheet);
  506. },
  507. /**
  508. * 获取复制数据HTML格式(过滤不可见单元格)
  509. * @param {GC.Spread.Sheets.Worksheet} sheet
  510. * @returns {string}
  511. */
  512. getFilterCopyHTML: function (sheet) {
  513. const sel = sheet.getSelections()[0];
  514. const html = [];
  515. html.push('<table>');
  516. for (let i = sel.row, iLen = sel.row + sel.rowCount; i < iLen; i++) {
  517. // 跳过隐藏行
  518. if (!sheet.getCell(i, -1).visible()) { continue; }
  519. const rowHtml = [];
  520. rowHtml.push('<tr>');
  521. for (let j = sel.col, jLen = sel.col + sel.colCount; j < jLen; j++) {
  522. const data = sheet.getText(i, j);
  523. rowHtml.push('<td>' + data + '</td>');
  524. }
  525. rowHtml.push('</tr>');
  526. html.push(rowHtml.join(''));
  527. }
  528. html.push('</table>');
  529. return html.join('');
  530. },
  531. /**
  532. * 获取复制数据Text格式(过滤不可见单元格)
  533. * @param {GC.Spread.Sheets.Worksheet} sheet
  534. * @returns {string}
  535. */
  536. getFilterCopyText: function (sheet) {
  537. const copyData = [];
  538. const sel = sheet.getSelections()[0];
  539. for(let i = sel.row, iLen = sel.row + sel.rowCount; i < iLen; i++) {
  540. // 跳过隐藏行
  541. if (!sheet.getCell(i, -1).visible()) { continue; }
  542. const rowText = [];
  543. for (let j = sel.col, jLen = sel.col + sel.colCount; j < jLen; j++) {
  544. const data = sheet.getText(i, j);
  545. rowText.push(data);
  546. }
  547. copyData.push(rowText.join('\t'));
  548. }
  549. return copyData.join('\n');
  550. },
  551. /**
  552. * 树表结构,定位至指定的节点
  553. * @param {GC.Spread.Sheets.Worksheet} sheet - 需要定位的sheet
  554. * @param {Number} id - 定位节点的id
  555. */
  556. locateTreeNode: function (sheet, id) {
  557. const tree = sheet.zh_tree;
  558. if (!tree) { return }
  559. const node = tree.getItems(id);
  560. if (!node) { return }
  561. const index = tree.nodes.indexOf(node);
  562. const sels = sheet.getSelections();
  563. sheet.setSelection(index, sels[0].col, 1, 1);
  564. sheet.showRow(index, spreadNS.VerticalPosition.center);
  565. },
  566. /**
  567. * 获取当前选行的数据对象
  568. * @param {GC.Spread.Sheets.Worksheet} sheet
  569. * @returns {Object}
  570. */
  571. getSelectObject: function (sheet) {
  572. if (!sheet) {
  573. return null;
  574. } else if (sheet.zh_dataType) {
  575. const sel = sheet.getSelections()[0];
  576. if (!sel) {
  577. return null;
  578. }
  579. if (sheet.zh_dataType === this.DataType.Tree) {
  580. return sheet.zh_tree.nodes[sel.row];
  581. } else if (sheet.zh_dataType === this.DataType.Data) {
  582. return sheet.zh_data[sel.row];
  583. } else {
  584. return null;
  585. }
  586. }
  587. },
  588. /**
  589. * 刷新列显示
  590. * @param sheet
  591. */
  592. refreshColumnVisible: function (sheet) {
  593. if(sheet.zh_setting) {
  594. sheet.zh_setting.cols.forEach(function (col, index) {
  595. if (col.visible !== undefined && col.visible !== null) {
  596. sheet.setColumnVisible(index, col.visible);
  597. }
  598. });
  599. }
  600. },
  601. /**
  602. * 刷新行显示
  603. * @param sheet
  604. */
  605. refreshTreeRowVisible: function (sheet) {
  606. this.beginMassOperation(sheet);
  607. const sortData = sheet.zh_dataType === this.DataType.Data ? sheet.zh_data : sheet.zh_tree.nodes;
  608. for (const iRow in sortData) {
  609. const node = sortData[iRow];
  610. if (node.visible !== undefined && node.visible !== null) {
  611. sheet.setRowVisible(iRow, node.visible);
  612. } else {
  613. sheet.setRowVisible(iRow, true);
  614. }
  615. }
  616. // if (sheet.zh_tree) {
  617. // for (const iRow in sheet.zh_tree.nodes) {
  618. // const node = sheet.zh_tree.nodes[iRow];
  619. // if (node.visible !== undefined && node.visible !== null) {
  620. // sheet.setRowVisible(iRow, node.visible);
  621. // } else {
  622. // sheet.setRowVisible(iRow, true);
  623. // }
  624. // }
  625. // }
  626. this.endMassOperation(sheet);
  627. },
  628. refreshColumnAlign: function (sheet) {
  629. if (sheet.zh_setting) {
  630. for (const iCol in sheet.zh_setting.cols) {
  631. const col = sheet.zh_setting.cols[iCol];
  632. sheet.getRange(-1, iCol, -1, 1).hAlign(col.hAlign);
  633. }
  634. }
  635. },
  636. /**
  637. * 刷新列是否只读
  638. * @param sheet
  639. * @param field
  640. * @param readonly
  641. */
  642. resetFieldReadOnly: function (sheet, field, readonly) {
  643. const fields = field instanceof Array ? field : [field];
  644. if (sheet.zh_setting) {
  645. sheet.zh_setting.cols.forEach(function (col, i) {
  646. if (fields.indexOf(col.field) !== -1) {
  647. col.readOnly = readonly;
  648. sheet.getRange(-1, i, -1, 1).locked(col.readOnly || sheet.zh_setting.readOnly || false);
  649. }
  650. });
  651. }
  652. },
  653. CellType: {
  654. /**
  655. * 获取树结构CellType
  656. * 通过SpreadJsObj.loadSheetData(sheet, 'tree', tree)加载树结构数据
  657. * 要求tree类型为PathTree, 节点必须含有{id, pid, level, order, is_leaf}数据
  658. * @returns {TreeNodeCellType}
  659. */
  660. getTreeNodeCellType: function () {
  661. const indent = 20;
  662. const levelIndent = -5;
  663. const halfBoxLength = 5;
  664. const halfExpandLength = 3;
  665. /**
  666. * 画一条点线段
  667. * @param canvas - 画布
  668. * @param x1 - 线段起点 x
  669. * @param y1 - 线段起点 y
  670. * @param x2 - 线段终点 x
  671. * @param y2 - 线段终点 y
  672. * @param color - 线段颜色
  673. */
  674. const drawDotLine = function (canvas, x1, y1, x2, y2, color) {
  675. canvas.save();
  676. // 设置偏移量
  677. canvas.translate(0.5, 0.5);
  678. canvas.beginPath();
  679. canvas.strokeStyle = color;
  680. canvas.dottedLine(x1, y1, x2, y2);
  681. canvas.stroke();
  682. canvas.restore();
  683. };
  684. /**
  685. * 画一条线段
  686. * @param canvas - 画布
  687. * @param x1 - 线段起点 x
  688. * @param y1 - 线段起点 y
  689. * @param x2 - 线段终点 x
  690. * @param y2 - 线段终点 y
  691. * @param color - 线段颜色
  692. */
  693. const drawLine = function (canvas, x1, y1, x2, y2, color) {
  694. canvas.save();
  695. // 设置偏移量
  696. canvas.translate(0.5, 0.5);
  697. canvas.beginPath();
  698. canvas.moveTo(x1, y1);
  699. canvas.lineTo(x2, y2);
  700. canvas.strokeStyle = color;
  701. canvas.stroke();
  702. canvas.restore();
  703. };
  704. /**
  705. * 画一个方框
  706. * @param {Object} canvas - 画布
  707. * @param {Object} rect - 方框区域
  708. * @param {String} lineColor - 画线颜色
  709. * @param {String} fillColor - 填充颜色
  710. */
  711. const drawBox = function (canvas, rect, lineColor, fillColor) {
  712. canvas.save();
  713. // 设置偏移量
  714. canvas.translate(0.5, 0.5);
  715. canvas.strokeStyle = lineColor;
  716. canvas.beginPath();
  717. canvas.moveTo(rect.left, rect.top);
  718. canvas.lineTo(rect.left, rect.bottom);
  719. canvas.lineTo(rect.right, rect.bottom);
  720. canvas.lineTo(rect.right, rect.top);
  721. canvas.lineTo(rect.left, rect.top);
  722. canvas.stroke();
  723. canvas.fillStyle = fillColor;
  724. canvas.fill();
  725. canvas.restore();
  726. };
  727. /**
  728. * 画树结构-展开收起按钮
  729. * @param {Object} canvas - 画布
  730. * @param {Number} x - 单元格左顶点坐标 x
  731. * @param {Number} y - 单元格左顶点坐标 y
  732. * @param {Number} w - 单元格宽度
  733. * @param {Number} h - 单元格高度
  734. * @param {Number} centerX - 按钮中央坐标
  735. * @param {Number} centerY - 按钮中央坐标
  736. * @param {Boolean} expanded - 当前节点展开收起状态
  737. */
  738. const drawExpandBox = function (canvas, x, y, w, h, centerX, centerY, expanded) {
  739. let rect = {
  740. top: centerY - halfBoxLength,
  741. bottom: centerY + halfBoxLength,
  742. left: centerX - halfBoxLength,
  743. right: centerX + halfBoxLength
  744. };
  745. let h1, h2, offset = 1;
  746. if (rect.left < x + w) {
  747. // 方框超出单元格宽度时,超出部分不画。
  748. rect.right = Math.min(rect.right, x + w);
  749. drawBox(canvas, rect, '#808080', 'white');
  750. // 画中心十字
  751. // 画十字横线
  752. h1 = centerX - halfExpandLength;
  753. h2 = Math.min(centerX + halfExpandLength, x + w);
  754. if (h2 > h1) {
  755. drawLine(canvas, h1, centerY, h2, centerY, '#808080');
  756. }
  757. // 画十字竖线
  758. if (!expanded && (centerX < x + w)) {
  759. drawLine(canvas, centerX, centerY - halfExpandLength, centerX, centerY + halfExpandLength, '#808080');
  760. }
  761. }
  762. };
  763. let TreeNodeCellType = function (){};
  764. TreeNodeCellType.prototype = new spreadNS.CellTypes.Text();
  765. const proto = TreeNodeCellType.prototype;
  766. /**
  767. * 绘制方法
  768. * @param {Object} canvas - 画布
  769. * @param value - cell.value
  770. * @param {Number} x - 单元格左顶点坐标 x
  771. * @param {Number} y - 单元格左顶点坐标 y
  772. * @param {Number} w - 单元格宽度
  773. * @param {Number} h - 单元格高度
  774. * @param {Object} style - cell.style
  775. * @param {Object} options
  776. */
  777. proto.paint = function (canvas, value, x, y, w, h, style, options) {
  778. // 清理 画布--单元格范围 旧数据
  779. if (style.backColor) {
  780. canvas.save();
  781. canvas.fillStyle = style.backColor;
  782. canvas.fillRect(x, y, w, h);
  783. canvas.restore();
  784. } else {
  785. canvas.clearRect(x, y, w, h);
  786. }
  787. const tree = options.sheet.zh_tree;
  788. // 使用TreeCellType前,需定义sheet.tree
  789. if (tree) {
  790. const node = options.row < tree.nodes.length ? tree.nodes[options.row] : null;
  791. if (node) {
  792. const showTreeLine = true;
  793. const centerX = Math.floor(x) + (node.level) * indent + (node.level) * levelIndent + indent / 2;
  794. const centerY = Math.floor((y + (y + h)) / 2);
  795. // Draw Sibling Line
  796. if (showTreeLine) {
  797. // Draw Horizontal Line
  798. if (centerX < x + w) {
  799. const x1 = centerX + indent / 2;
  800. //drawLine(canvas, centerX, centerY, Math.min(x1, x + w), centerY, 'gray');
  801. drawDotLine(canvas, centerX, centerY, Math.min(x1, x + w), centerY, '#b8b8b8');
  802. }
  803. // Draw Vertical Line
  804. if (centerX < x + w) {
  805. const y1 = tree.isLastSibling(node) ? centerY : y + h;
  806. const parent = tree.getParent(node);
  807. const y2 = y1 - centerY;
  808. if (node.order === 1 && !parent) {
  809. //drawLine(canvas, centerX, centerY, centerX, y1, 'gray');
  810. drawDotLine(canvas, centerX, centerY, centerX, y1, '#b8b8b8');
  811. } else {
  812. //drawLine(canvas, centerX, y, centerX, y1, 'gray');
  813. drawDotLine(canvas, centerX, y, centerX, y1, '#b8b8b8');
  814. }
  815. }
  816. }
  817. // Draw Expand Box
  818. if (!node.is_leaf) {
  819. drawExpandBox(canvas, x, y, w, h, centerX, centerY, node.expanded);
  820. }
  821. // Draw Parent Line
  822. if (showTreeLine) {
  823. let parent = tree.getParent(node), parentCenterX = centerX - indent - levelIndent;
  824. while (parent) {
  825. if (!tree.isLastSibling(parent)) {
  826. if (parentCenterX < x + w) {
  827. //drawLine(canvas, parentCenterX, y, parentCenterX, y + h, 'gray');
  828. drawDotLine(canvas, parentCenterX, y, parentCenterX, y + h, '#b8b8b8');
  829. }
  830. }
  831. parent = tree.getParent(parent);
  832. parentCenterX -= (indent + levelIndent);
  833. }
  834. };
  835. // 重定位x
  836. const move = (node.level + 1) * indent + (node.level) * levelIndent;
  837. x = x + move;
  838. w = w - move;
  839. }
  840. }
  841. // Drawing Text
  842. spreadNS.CellTypes.Text.prototype.paint.apply(this, [canvas, value, x, y, w, h, style, options]);
  843. };
  844. /**
  845. * 获取点击信息
  846. * @param {Number} x
  847. * @param {Number} y
  848. * @param {Object} cellStyle
  849. * @param {Object} cellRect
  850. * @param {Object} context
  851. * @returns {{x: *, y: *, row: *, col: *|boolean|*[]|number|{}|UE.dom.dtd.col, cellStyle: *, cellRect: *, sheet: *|StyleSheet, sheetArea: *}}
  852. */
  853. proto.getHitInfo = function (x, y, cellStyle, cellRect, context) {
  854. return {
  855. x: x,
  856. y: y,
  857. row: context.row,
  858. col: context.col,
  859. cellStyle: cellStyle,
  860. cellRect: cellRect,
  861. sheet: context.sheet,
  862. sheetArea: context.sheetArea
  863. };
  864. };
  865. /**
  866. * 鼠标点击 树结构按钮 响应展开收起(未加载子节点时,先加载子节点)
  867. * @param {Object} hitinfo - 见getHitInfo
  868. */
  869. proto.processMouseDown = function (hitinfo) {
  870. const offset = -1;
  871. const tree = hitinfo.sheet.zh_tree;
  872. if (!tree) { return; }
  873. const node = tree.nodes[hitinfo.row];
  874. if (!node) { return; }
  875. let centerX = hitinfo.cellRect.x + offset + (node.level) * indent + (node.level) * levelIndent + indent / 2;
  876. let centerY = (hitinfo.cellRect.y + offset + (hitinfo.cellRect.y + offset + hitinfo.cellRect.height)) / 2;
  877. // 点击展开节点时,如果已加载子项,则展开,反之这加载子项,展开
  878. if (Math.abs(hitinfo.x - centerX) < halfBoxLength && Math.abs(hitinfo.y - centerY) < halfBoxLength) {
  879. const children = tree.getChildren(node);
  880. if (!node.expanded && !node.is_leaf && children.length === 0 && tree.loadChildren) {
  881. tree.loadChildren(node, function () {
  882. node.expanded = true;
  883. const children = tree.getChildren(node);
  884. hitinfo.sheet.addRows(hitinfo.row + 1, children.length);
  885. SpreadJsObj.reLoadRowData(hitinfo.sheet, hitinfo.row + 1, children.length);
  886. });
  887. } else {
  888. tree.setExpanded(node, !node.expanded);
  889. SpreadJsObj.massOperationSheet(hitinfo.sheet, function () {
  890. const posterity = tree.getPosterity(node);
  891. for (const child of posterity) {
  892. hitinfo.sheet.setRowVisible(tree.nodes.indexOf(child), child.visible, hitinfo.sheetArea);
  893. }
  894. });
  895. hitinfo.sheet.repaint();
  896. }
  897. }
  898. };
  899. return new TreeNodeCellType();
  900. },
  901. /**
  902. * 获取 带悬浮提示的CellType
  903. * @returns {TipCellType}
  904. */
  905. getTipCellType: function () {
  906. const TipCellType = function () {};
  907. // 继承 SpreadJs定义的 普通的TextCellType
  908. TipCellType.prototype = new spreadNS.CellTypes.Text();
  909. const proto = TipCellType.prototype;
  910. /**
  911. * 获取点击信息
  912. * @param {Number} x
  913. * @param {Number} y
  914. * @param {Object} cellStyle
  915. * @param {Object} cellRect
  916. * @param {Object} context
  917. * @returns {{x: *, y: *, row: *, col: *|boolean|*[]|number|{}|UE.dom.dtd.col, cellStyle: *, cellRect: *, sheet: *|StyleSheet, sheetArea: *}}
  918. */
  919. proto.getHitInfo = function (x, y, cellStyle, cellRect, context) {
  920. return {
  921. x: x,
  922. y: y,
  923. row: context.row,
  924. col: context.col,
  925. cellStyle: cellStyle,
  926. cellRect: cellRect,
  927. sheet: context.sheet,
  928. sheetArea: context.sheetArea
  929. };
  930. };
  931. /**
  932. * 鼠标进入单元格事件 - 显示悬浮提示
  933. * @param {Object} hitinfo - 见getHitInfo返回值
  934. */
  935. proto.processMouseEnter = function (hitinfo) {
  936. const text = hitinfo.sheet.getText(hitinfo.row, hitinfo.col);
  937. const setting = hitinfo.sheet.setting;
  938. if (setting.pos && text && text !== '') {
  939. if (!this._toolTipElement) {
  940. let div = $('#autoTip')[0];
  941. if (!div) {
  942. div = document.createElement("div");
  943. $(div).css("position", "absolute")
  944. .css("border", "1px #C0C0C0 solid")
  945. .css("box-shadow", "1px 2px 5px rgba(0,0,0,0.4)")
  946. .css("font", "9pt Arial")
  947. .css("background", "white")
  948. .css("padding", 5)
  949. .attr("id", 'autoTip');
  950. $(div).hide();
  951. document.body.insertBefore(div, null);
  952. }
  953. this._toolTipElement = div;
  954. $(this._toolTipElement).text(text).css("top", setting.pos.y + hitinfo.y + 15).css("left", setting.pos.x + hitinfo.x + 15);
  955. $(this._toolTipElement).show("fast");
  956. }
  957. }
  958. };
  959. /**
  960. * 鼠标移出单元格事件 - 隐藏悬浮提示
  961. * @param {Object} hitinfo - 见getHitInfo返回值
  962. */
  963. proto.processMouseLeave = function (hitinfo) {
  964. if (this._toolTipElement) {
  965. $(this._toolTipElement).hide();
  966. this._toolTipElement = null;
  967. }
  968. };
  969. return new TipCellType();
  970. },
  971. /**
  972. * 获取 带图片的cellType(图片需在document中定义好img,并写入col的img属性)
  973. *
  974. * img:
  975. * 1. 整列固定,则传入img的select
  976. * e.g. {title: '附件', field: 'attachment', cellType: 'image', img = '#attachment-img'}
  977. *
  978. * 2. 各单元格自定义,则
  979. * e.g. {title: '附件', field: 'attachment', cellType: 'image', img = getAttachmentImage}
  980. * function getAttachmentImage (data) {
  981. * $('#attachment-img').url = data.attachmentImageUrl;
  982. * return $('#attachment-img')[0];
  983. * }
  984. *
  985. * @returns {ImageCellType}
  986. */
  987. getImageCellType: function () {
  988. const ImageCellType = function (){};
  989. ImageCellType.prototype = new spreadNS.CellTypes.Text();
  990. const proto = ImageCellType.prototype;
  991. proto.getImage = function (sheet, iRow, iCol) {
  992. const col = sheet.zh_setting.cols[iCol];
  993. let imgSource = col.img;
  994. if (imgSource && Object.prototype.toString.apply(imgSource) === "[object Function]") {
  995. const sortData = SpreadJsObj.getSortData(sheet);
  996. const data = sortData ? sortData[iRow] : null;
  997. return data ? imgSource(data) : null;
  998. } else {
  999. return $(imgSource)[0] ? $(imgSource)[0] : null;
  1000. }
  1001. };
  1002. proto.paint = function (canvas, value, x, y, w, h, style, options) {
  1003. const col = options.sheet.zh_setting.cols[options.col];
  1004. const img = this.getImage(options.sheet, options.row, options.col);
  1005. const indent = col.indent ? col.indent : 10;
  1006. if (img) {
  1007. if (style.backColor) {
  1008. canvas.save();
  1009. canvas.fillStyle = style.backColor;
  1010. canvas.fillRect(x, y, indent + img.width, h);
  1011. canvas.restore();
  1012. }
  1013. canvas.drawImage(img, x + indent, y + (h - img.height) / 2);
  1014. if (style.hAlign !== spreadNS.HorizontalAlign.left) {
  1015. style.hAlign = spreadNS.HorizontalAlign.left;
  1016. }
  1017. x = x + indent + img.width;
  1018. w = w - indent - img.width;
  1019. }
  1020. // Drawing Text
  1021. spreadNS.CellTypes.Text.prototype.paint.apply(this, [canvas, value, x, y, w, h, style, options]);
  1022. };
  1023. /**
  1024. * 获取点击信息
  1025. * @param {Number} x
  1026. * @param {Number} y
  1027. * @param {Object} cellStyle
  1028. * @param {Object} cellRect
  1029. * @param {Object} context
  1030. * @returns {{x: *, y: *, row: *, col: *|boolean|*[]|number|{}|UE.dom.dtd.col, cellStyle: *, cellRect: *, sheet: *|StyleSheet, sheetArea: *}}
  1031. */
  1032. proto.getHitInfo = function (x, y, cellStyle, cellRect, context) {
  1033. return {
  1034. x: x,
  1035. y: y,
  1036. row: context.row,
  1037. col: context.col,
  1038. cellStyle: cellStyle,
  1039. cellRect: cellRect,
  1040. sheet: context.sheet,
  1041. sheetArea: context.sheetArea
  1042. };
  1043. };
  1044. /**
  1045. * 鼠标点击
  1046. * @param {Object} hitinfo - 见getHitInfo
  1047. */
  1048. proto.processMouseDown = function (hitinfo) {
  1049. const img = this.getImage(hitinfo.sheet, hitinfo.row, hitinfo.col);
  1050. if (img) {
  1051. const halfX = img.width / 2, halfY = img.height / 2;
  1052. const centerX = hitinfo.cellRect.x + indent + halfX;
  1053. const centerY = hitinfo.cellRect.y + hitinfo.cellRect.height / 2;
  1054. // 点击展开节点时,如果已加载子项,则展开,反之这加载子项,展开
  1055. if (Math.abs(hitinfo.x - centerX) < halfX && Math.abs(hitinfo.y - centerY) < halfY) {
  1056. const imageClick = hitinfo.sheet.zh_setting ? hitinfo.sheet.zh_setting.imageClick : null;
  1057. if (imageClick && Object.prototype.toString.apply(imageClick) === "[object Function]") {
  1058. const sortData = SpreadJsObj.getSortData(hitinfo.sheet);
  1059. const data = sortData ? sortData[hitinfo.row] : null;
  1060. imageClick(data);
  1061. }
  1062. }
  1063. }
  1064. };
  1065. return new ImageCellType();
  1066. },
  1067. /**
  1068. *
  1069. * 获取 带normal-hover-active按钮的cellType(需定义三张图片,须在document中定义好img,并写入col的normalImg, hoverImg, activeImg属性)
  1070. * 其中:normalImg必需,向下套用(不存在activeImg则使用hoverImg,不存在hoverImg则使用normalImg)
  1071. * 三个img均可像getImageCellType一样动态获取,参见getImageCellType注释
  1072. *
  1073. * @returns {ImageCellType}
  1074. */
  1075. getImageButtonCellType: function () {
  1076. let hover = 1, active = 2;
  1077. const ImageCellType = function (){};
  1078. ImageCellType.prototype = new spreadNS.CellTypes.Text();
  1079. const proto = ImageCellType.prototype;
  1080. proto.getImage = function (sheet, iRow, iCol) {
  1081. const col = sheet.zh_setting.cols[iCol];
  1082. let imgSource = col.normalImg;
  1083. const cell = sheet.getCell(iRow, iCol), tag = cell.tag();
  1084. if (tag === active) {
  1085. imgSource = col.activeImg ? col.activeImg : (col.hoverImg ? col.hoverImg : col.normalImg);
  1086. } else if (tag === hover) {
  1087. imgSource = col.hoverImg ? col.hoverImg : col.normalImg;
  1088. }
  1089. if (imgSource && Object.prototype.toString.apply(imgSource) === "[object Function]") {
  1090. const sortData = SpreadJsObj.getSortData(sheet);
  1091. const data = sortData ? sortData[iRow] : null;
  1092. return data ? imgSource(data) : null;
  1093. } else {
  1094. return $(imgSource)[0] ? $(imgSource)[0] : null;
  1095. }
  1096. };
  1097. proto.paint = function (canvas, value, x, y, w, h, style, options) {
  1098. const col = options.sheet.zh_setting.cols[options.col];
  1099. const sortData = SpreadJsObj.getSortData(options.sheet);
  1100. const data = sortData ? sortData[options.row] : null;
  1101. let showImage = true;
  1102. if (col.showImage && Object.prototype.toString.apply(col.showImage) === "[object Function]") {
  1103. showImage = col.showImage(data);
  1104. }
  1105. const img = showImage ? this.getImage(options.sheet, options.row, options.col) : null;
  1106. const indent = col.indent ? col.indent : 10;
  1107. if (style.hAlign === spreadNS.HorizontalAlign.right) {
  1108. if (img) {
  1109. if (style.backColor) {
  1110. canvas.save();
  1111. canvas.fillStyle = style.backColor;
  1112. canvas.fillRect(x + w - indent - img.width, y, img.width, h);
  1113. canvas.restore();
  1114. }
  1115. canvas.drawImage(img, x + w - indent - img.width, y + (h - img.height) / 2);
  1116. w = w - indent - img.width;
  1117. }
  1118. // Drawing Text
  1119. spreadNS.CellTypes.Text.prototype.paint.apply(this, [canvas, value, x, y, w, h, style, options]);
  1120. } else {
  1121. if (img) {
  1122. if (style.backColor) {
  1123. canvas.save();
  1124. canvas.fillStyle = style.backColor;
  1125. canvas.fillRect(x, y, indent + img.width, h);
  1126. canvas.restore();
  1127. }
  1128. canvas.drawImage(img, x + 10, y + (h - img.height) / 2);
  1129. if (style.hAlign !== spreadNS.HorizontalAlign.left) {
  1130. style.hAlign = spreadNS.HorizontalAlign.left;
  1131. }
  1132. x = x + indent + img.width;
  1133. w = w - indent - img.width;
  1134. }
  1135. // Drawing Text
  1136. spreadNS.CellTypes.Text.prototype.paint.apply(this, [canvas, value, x, y, w, h, style, options]);
  1137. }
  1138. };
  1139. /**
  1140. * 获取点击信息
  1141. * @param {Number} x
  1142. * @param {Number} y
  1143. * @param {Object} cellStyle
  1144. * @param {Object} cellRect
  1145. * @param {Object} context
  1146. * @returns {{x: *, y: *, row: *, col: *|boolean|*[]|number|{}|UE.dom.dtd.col, cellStyle: *, cellRect: *, sheet: *|StyleSheet, sheetArea: *}}
  1147. */
  1148. proto.getHitInfo = function (x, y, cellStyle, cellRect, context) {
  1149. return {
  1150. x: x,
  1151. y: y,
  1152. row: context.row,
  1153. col: context.col,
  1154. cellStyle: cellStyle,
  1155. cellRect: cellRect,
  1156. sheet: context.sheet,
  1157. sheetArea: context.sheetArea
  1158. };
  1159. };
  1160. /**
  1161. * 鼠标点击
  1162. * @param {Object} hitinfo - 见getHitInfo
  1163. */
  1164. proto.processMouseEnter = function (hitinfo) {
  1165. const col = hitinfo.sheet.zh_setting.cols[hitinfo.col];
  1166. // Drawing Image
  1167. if (col.hoverImg) {
  1168. const cell = hitinfo.sheet.getCell(hitinfo.row, hitinfo.col);
  1169. cell.tag(hover);
  1170. hitinfo.sheet.repaint(hitinfo.cellRect);
  1171. }
  1172. };
  1173. proto.processMouseLeave = function (hitinfo) {
  1174. const col = hitinfo.sheet.zh_setting.cols[hitinfo.col];
  1175. // Drawing Image
  1176. if (col.hoverImg) {
  1177. const cell = hitinfo.sheet.getCell(hitinfo.row, hitinfo.col);
  1178. cell.tag(null);
  1179. hitinfo.sheet.repaint(hitinfo.cellRect);
  1180. }
  1181. };
  1182. proto.processMouseDown = function (hitinfo) {
  1183. const col = hitinfo.sheet.zh_setting.cols[hitinfo.col];
  1184. if (col.activeImg) {
  1185. const cell = hitinfo.sheet.getCell(hitinfo.row, hitinfo.col);
  1186. cell.tag(active);
  1187. hitinfo.sheet.repaint(hitinfo.cellRect);
  1188. }
  1189. };
  1190. proto.processMouseUp = function (hitinfo) {
  1191. const col = hitinfo.sheet.zh_setting.cols[hitinfo.col];
  1192. const sortData = SpreadJsObj.getSortData(hitinfo.sheet);
  1193. const data = sortData ? sortData[hitinfo.row] : null;
  1194. if (col.showImage && Object.prototype.toString.apply(col.showImage) === "[object Function]") {
  1195. if (!col.showImage(data)) {
  1196. return;
  1197. }
  1198. }
  1199. const imageClick = hitinfo.sheet.zh_setting ? hitinfo.sheet.zh_setting.imageClick : null;
  1200. if (imageClick && Object.prototype.toString.apply(imageClick) === "[object Function]") {
  1201. imageClick(data);
  1202. const cell = hitinfo.sheet.getCell(hitinfo.row, hitinfo.col);
  1203. cell.tag(null);
  1204. hitinfo.sheet.repaint(hitinfo.cellRect);
  1205. }
  1206. };
  1207. /*
  1208. 注释部分以进入鼠标进入图片,点击图片为基准更新图片,鼠标快速移动时,可能失效
  1209. */
  1210. // proto.processMouseDown = function (hitinfo) {
  1211. // const img = this.getImage(hitinfo.sheet, hitinfo.row, hitinfo.col);
  1212. // const halfX = img.width / 2, halfY = img.height / 2;
  1213. // const centerX = hitinfo.cellRect.x + indent + halfX;
  1214. // const centerY = hitinfo.cellRect.y + hitinfo.cellRect.height / 2;
  1215. //
  1216. // if (Math.abs(hitinfo.x - centerX) < halfX && Math.abs(hitinfo.y - centerY) < halfY) {
  1217. // const cell = hitinfo.sheet.getCell(hitinfo.row, hitinfo.col);
  1218. // cell.tag(down);
  1219. // hitinfo.sheet.repaint(hitinfo.cellRect);
  1220. // }
  1221. // };
  1222. // proto.processMouseUp = function (hitinfo) {
  1223. // const img = this.getImage(hitinfo.sheet, hitinfo.row, hitinfo.col);
  1224. // const halfX = img.width / 2, halfY = img.height / 2;
  1225. // const centerX = hitinfo.cellRect.x + indent + halfX;
  1226. // const centerY = hitinfo.cellRect.y + hitinfo.cellRect.height / 2;
  1227. //
  1228. // // 点击展开节点时,如果已加载子项,则展开,反之这加载子项,展开
  1229. // if (Math.abs(hitinfo.x - centerX) < halfX && Math.abs(hitinfo.y - centerY) < halfY) {
  1230. // const imageClick = hitinfo.sheet.zh_setting ? hitinfo.sheet.zh_setting.imageClick : null;
  1231. // if (imageClick && Object.prototype.toString.apply(imageClick) === "[object Function]") {
  1232. // const sortData = SpreadJsObj.getSortData(hitinfo.sheet);
  1233. // const data = sortData ? sortData[hitinfo.row] : null;
  1234. // imageClick(data);
  1235. // const cell = hitinfo.sheet.getCell(hitinfo.row, hitinfo.col);
  1236. // cell.tag(null);
  1237. // hitinfo.sheet.repaint(hitinfo.cellRect);
  1238. // }
  1239. // }
  1240. // };
  1241. // proto.processMouseMove = function (hitinfo) {
  1242. // const img = this.getImage(hitinfo.sheet, hitinfo.row, hitinfo.col);
  1243. // const halfX = img.width / 2, halfY = img.height / 2;
  1244. // const centerX = hitinfo.cellRect.x + indent + halfX;
  1245. // const centerY = hitinfo.cellRect.y + hitinfo.cellRect.height / 2;
  1246. // const cell = hitinfo.sheet.getCell(hitinfo.row, hitinfo.col);
  1247. // if (Math.abs(hitinfo.x - centerX) < halfX && Math.abs(hitinfo.y - centerY) < halfY) {
  1248. // if (cell.tag() !== hover) {
  1249. // cell.tag(hover);
  1250. // hitinfo.sheet.repaint(hitinfo.cellRect);
  1251. // }
  1252. // } else {
  1253. // if (cell.tag() === hover) {
  1254. // cell.tag(null);
  1255. // hitinfo.sheet.repaint(hitinfo.cellRect);
  1256. // }
  1257. // }
  1258. // };
  1259. return new ImageCellType();
  1260. },
  1261. /**
  1262. * 获取 嵌入Html的cellType
  1263. * @returns {HTMLCellType}
  1264. */
  1265. getHtmlCellType: function () {
  1266. const HTMLCellType = function (){};
  1267. HTMLCellType.prototype = new spreadNS.CellTypes.Text;
  1268. const proto = ImageCellType.prototype;
  1269. proto.paint = function (ctx, value, x, y, w, h, style, context) {
  1270. let DOMURL = window.URL || window.webkitURL || window;
  1271. let cell = context.sheet.getCell(context.row, context.col);
  1272. let img = cell.tag();
  1273. if (img) {
  1274. try {
  1275. ctx.save();
  1276. ctx.rect(x, y, w, h);
  1277. ctx.clip();
  1278. ctx.drawImage(img, x + 2, y + 2)
  1279. ctx.restore();
  1280. cell.tag(null);
  1281. return;
  1282. }
  1283. catch (err) {
  1284. GC.Spread.Sheets.CustomCellType.prototype.paint.apply(this, [ctx, "#HTMLError", x, y, w, h, style, context])
  1285. cell.tag(null);
  1286. return;
  1287. }
  1288. }
  1289. let svgPattern = '<svg xmlns="http://www.w3.org/2000/svg" width="{0}" height="{1}">' +
  1290. '<foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="font:{2}">{3}</div></foreignObject></svg>';
  1291. let data = svgPattern.replace("{0}", w).replace("{1}", h).replace("{2}", style.font).replace("{3}", value);
  1292. let doc = document.implementation.createHTMLDocument("");
  1293. doc.write(data);
  1294. // Get well-formed markup
  1295. data = (new XMLSerializer()).serializeToString(doc.body.children[0]);
  1296. img = new Image();
  1297. //var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
  1298. //var url = DOMURL.createObjectURL(svg);
  1299. //img.src = url;
  1300. img.src = 'data:image/svg+xml;base64,' + window.btoa(data);
  1301. cell.tag(img);
  1302. img.onload = function () {
  1303. context.sheet.repaint(new GC.Spread.Sheets.Rect(x, y, w, h));
  1304. }
  1305. };
  1306. return new HTMLCellType();
  1307. },
  1308. /**
  1309. * 获取 字符超长缩略的cellType
  1310. * @returns {EllipsisTextCellType}
  1311. */
  1312. getEllipsisTextCellType: function () {
  1313. const EllipsisTextCellType = function (){};
  1314. EllipsisTextCellType.prototype = new spreadNS.CellTypes.Text;
  1315. const proto = EllipsisTextCellType.prototype;
  1316. const getEllipsisText = function(c, str, maxWidth) {
  1317. var width = c.measureText(str).width;
  1318. var ellipsis = '…';
  1319. var ellipsisWidth = c.measureText(ellipsis).width;
  1320. if (width <= maxWidth || width <= ellipsisWidth) {
  1321. return str;
  1322. } else {
  1323. var len = str.length;
  1324. while (width >= maxWidth - ellipsisWidth && len-- > 0) {
  1325. str = str.substring(0, len);
  1326. width = c.measureText(str).width;
  1327. }
  1328. return str + ellipsis;
  1329. }
  1330. };
  1331. proto.paint = function (ctx, value, x, y, w, h, style, context) {
  1332. ctx.font = style.font;
  1333. value = getEllipsisText(ctx, value, w - 2);
  1334. spreadNS.CellTypes.Text.prototype.paint.apply(this, [ctx, value, x, y, w, h, style, context]);
  1335. };
  1336. return new EllipsisTextCellType();
  1337. },
  1338. /**
  1339. * 获取 动态显示ComboBox的cellType
  1340. * @returns {ActiveComboCellType}
  1341. */
  1342. getActiveComboCellType: function () {
  1343. const ActiveComboCellType = function () { };
  1344. ActiveComboCellType.prototype = new spreadNS.CellTypes.ComboBox();
  1345. const proto = ActiveComboCellType.prototype;
  1346. proto.paintValue = function (ctx, value, x, y, w, h, style, options) {
  1347. const sheet = options.sheet;
  1348. if (options.row === sheet.getActiveRowIndex() && options.col === sheet.getActiveColumnIndex()
  1349. && !sheet.getCell(options.row, options.col).locked()) {
  1350. spreadNS.CellTypes.ComboBox.prototype.paintValue.apply(this, arguments);
  1351. } else {
  1352. spreadNS.CellTypes.Base.prototype.paintValue.apply(this, arguments);
  1353. }
  1354. };
  1355. proto.getHitInfo = function (x, y, cellStyle, cellRect, options) {
  1356. const sheet = options.sheet;
  1357. if (options.row === sheet.getActiveRowIndex() && options.col === sheet.getActiveColumnIndex()
  1358. && !sheet.getCell(options.row, options.col).locked()) {
  1359. return spreadNS.CellTypes.ComboBox.prototype.getHitInfo.apply(this, [x, y, cellStyle, cellRect, options]);
  1360. } else {
  1361. return {
  1362. x: x,
  1363. y: y,
  1364. row: options.row,
  1365. col: options.col,
  1366. cellStyle: cellStyle,
  1367. cellRect: cellRect,
  1368. sheetArea: options.sheetArea
  1369. };
  1370. }
  1371. };
  1372. return new ActiveComboCellType();
  1373. },
  1374. /**
  1375. * 获取 单位的CellType
  1376. * @returns {GC.Spread.Sheets.CellTypes.ComboBox}
  1377. */
  1378. getUnitCellType: function () {
  1379. let combo = this.getActiveComboCellType();
  1380. combo.itemHeight(10).items(['m', 'km', 'm2', 'm3', 'dm3', 'kg', 't', 'm3·km',
  1381. '总额', '月' ,'项', '处' ,'个', '根', '棵', '块', '台', '系统', '每一试桩',
  1382. '桥长米', '公路公里', '株', '组', '座', '元', '工日', '套', '台班', '艘班', '亩',
  1383. 'm/处', 'm/道', 'm/座', 'm2/m', 'm3/m', 'm3/处', '根/米', 'm3/m2']);
  1384. return combo;
  1385. }
  1386. }
  1387. };