/** * Created by CSL on 2018-09-19. */ var blockLibObj = { mainSpread: null, mainSheet: null, mainTree: null, mainTreeController: null, mainSetting: { "emptyRowHeader": true, "rowHeaderWidth": 15, "emptyRows":0, "headRows":1, "headRowHeight":[30], "defaultRowHeight": 21, "treeCol": 9, "cols":[{ "width":400, "readOnly": true, "head":{ "titleNames":["名称"], "spanCols":[1], "spanRows":[1], "vAlign":[1], "hAlign":[1], "font":["Arial"] }, "data":{ "field":"name", "vAlign":1, "hAlign":0, "font":"Arial" } }] }, mainDatas: [], buildSheet: function () { $.bootstrapLoading.start(); let me = this; me.mainDatas = [ {ID: 2, ParentID: -1, NextSiblingID: 3, name: '分类2', type: 1}, {ID: 3, ParentID: -1, NextSiblingID: -1, name: '分类3', type: 1}, {ID: 6, ParentID: 2, NextSiblingID: 7, name: '块1', type: 2}, {ID: 7, ParentID: 2, NextSiblingID: -1, name: '块2', type: 2}, {ID: 52, ParentID: -1, NextSiblingID: 53, name: '分类52', type: 1}, {ID: 55, ParentID: -1, NextSiblingID: -1, name: '分类55', type: 1}, {ID: 88, ParentID: 52, NextSiblingID: -1, name: '块88', type: 2} ]; if (me.mainSpread) { me.mainSpread.destroy(); me.mainSpread = null; }; me.mainSpread = SheetDataHelper.createNewSpread($('#div_block_tree')[0]); // me.mainSpread = TREE_SHEET_HELPER.createNewSpread($('#div_block_tree')[0]); me.mainSheet = me.mainSpread.getSheet(0); me.mainSheet.name('blockLibSheet'); sheetCommonObj.spreadDefaultStyle(me.mainSpread); // me.mainSpread.bind(GC.Spread.Sheets.Events.CellDoubleClick, this.onCellDoubleClick); var showblockTree = function (datas) { me.mainTree = idTree.createNew({id: 'ID', pid: 'ParentID', nid: 'NextSiblingID', rootId: -1, autoUpdate: false}); me.mainTreeController = TREE_SHEET_CONTROLLER.createNew(me.mainTree, me.mainSheet, me.mainSetting); me.mainTree.loadDatas(datas); me.mainTreeController.showTreeData(); me.mainSheet.getRange(-1, 0, -1, 1).cellType(me.getTreeCell(me.mainTree)); /* me.mainTreeController.bind(TREE_SHEET_CONTROLLER.eventName.treeSelectedChanged, function (node) { rationLibObj.loadSectionRations(node && node.children.length === 0 ? node.getID() : null); }); if (me.mainTree.firstNode() && me.mainTree.firstNode().length === 0) { rationLibObj.loadSectionRations(me.mainTree.firstNode().getID()); } else { rationLibObj.loadSectionRations(); };*/ }; /* CommonAjax.post('/complementaryRation/api/getRationTree', {userId: userID, rationRepId: rationLibID}, function (datas) { showblockTree(datas); $.bootstrapLoading.end(); }, function () { showblockTree([]); $.bootstrapLoading.end(); });*/ showblockTree(me.mainDatas); $.bootstrapLoading.end(); }, getTreeCell: function (tree) { let me = this; let indent = 20, levelIndent = -5, halfBoxLength = 5, halfExpandLength = 3, imgWidth = 14, imgHeight = 14; let TreeCell = function () {}; TreeCell.prototype = new GC.Spread.Sheets.CellTypes.Text(); TreeCell.prototype.paint = function (ctx, value, x, y, w, h, style, options) { if (style.backColor) { ctx.save(); ctx.fillStyle = style.backColor; ctx.fillRect(x, y, w, h); ctx.restore(); } else { ctx.clearRect(x, y, w, h); }; let drawLine = function (canvas, x1, y1, x2, y2, color) { ctx.save(); ctx.translate(0.5, 0.5); ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.strokeStyle = color; ctx.stroke(); ctx.restore(); }; let drawExpandBox = function (ctx, x, y, w, h, centerX, centerY, expanded) { let rect = {}, h1, h2, offset = 1; rect.top = centerY - halfBoxLength; rect.bottom = centerY + halfBoxLength; rect.left = centerX - halfBoxLength; rect.right = centerX + halfBoxLength; if (rect.left < x + w) { rect.right = Math.min(rect.right, x + w); ctx.save(); ctx.translate(0.5, 0.5); ctx.strokeStyle = 'black'; ctx.beginPath(); ctx.moveTo(rect.left, rect.top); ctx.lineTo(rect.left, rect.bottom); ctx.lineTo(rect.right, rect.bottom); ctx.lineTo(rect.right, rect.top); ctx.lineTo(rect.left, rect.top); ctx.stroke(); ctx.fillStyle = 'white'; ctx.fill(); ctx.restore(); // Draw Horizontal Line h1 = centerX - halfExpandLength; h2 = Math.min(centerX + halfExpandLength, x + w); if (h2 > h1) { drawLine(ctx, h1, centerY, h2, centerY, 'black'); } // Draw Vertical Line if (!expanded && (centerX < x + w)) { drawLine(ctx, centerX, centerY - halfExpandLength, centerX, centerY + halfExpandLength, 'black'); } } }; let node = tree.items[options.row]; if (!node) return; let showTreeLine = true; let centerX = Math.floor(x) + node.depth() * indent + node.depth() * levelIndent + indent / 2; let x1 = centerX + indent / 2; let centerY = Math.floor((y + (y + h)) / 2); let y1; // Draw Horizontal Line、Image、sibling Vertical Line if (centerX < x + w) { // Draw Horizontal Line drawLine(ctx, centerX, centerY, Math.min(x1, x + w), centerY, 'gray'); // Draw Image let imgId; if (node.data.type === 0) imgId = 'blockLib_pic' else if (node.data.type === 1) imgId = 'folder_pic' else if (node.data.type === 2) { imgId = 'block_pic'; }; let img = document.getElementById(imgId); ctx.drawImage(img, centerX+indent/2+3, centerY - 7, imgWidth, imgHeight); // Draw Vertical Line y1 = node.isLast() ? centerY : y + h; if (node.isFirst() && !node.parent/*.parent*/) { drawLine(ctx, centerX, centerY, centerX, y1, 'gray'); } else { drawLine(ctx, centerX, y, centerX, y1, 'gray'); } } // Draw Expand Box if (node.children.length > 0) { drawExpandBox(ctx, x, y, w, h, centerX, centerY, node.expanded); } // Draw Parent Line var curNode = node.parent, parentCenterX = centerX - indent - levelIndent; while (curNode) { if (!curNode.isLast()) { if (parentCenterX < x + w) { drawLine(ctx, parentCenterX, y, parentCenterX, y + h, 'gray'); } } curNode = curNode.parent; parentCenterX -= (indent + levelIndent); } // Draw Text x = x + (node.depth() + 1) * indent + node.depth() * levelIndent + imgWidth + 3; w = w - (node.depth() + 1) * indent - node.depth() * levelIndent - imgWidth - 3; GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, arguments); }; TreeCell.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) { let info = {x: x, y: y, row: context.row, col: context.col, cellStyle: cellStyle, cellRect: cellRect, sheetArea: context.sheetArea}; let node = tree.items[info.row]; let offset = -1; let centerX = info.cellRect.x + offset + node.depth() * indent + node.depth() * levelIndent + indent / 2; let text = context.sheet.getText(info.row, info.col); let value = context.sheet.getValue(info.row, info.col); let acStyle = context.sheet.getActualStyle(info.row, info.col), zoom = context.sheet.zoom(); let textLength = this.getAutoFitWidth(value, text, acStyle, zoom, {sheet: context.sheet, row: info.row, col: info.col, sheetArea: GC.Spread.Sheets.SheetArea.viewport}); if(info.x > centerX + halfBoxLength && info.x < centerX + halfBoxLength + imgWidth + indent/2+3 + textLength){ info.isReservedLocation = true; } return info; }; TreeCell.prototype.processMouseDown = function (hitinfo) { let offset = -1; let node = tree.items[hitinfo.row]; let centerX = hitinfo.cellRect.x + offset + node.depth() * indent + node.depth() * levelIndent + indent / 2; let centerY = (hitinfo.cellRect.y + offset + (hitinfo.cellRect.y + offset + hitinfo.cellRect.height)) / 2; let text = hitinfo.sheet.getText(hitinfo.row, hitinfo.col); let value = hitinfo.sheet.getValue(hitinfo.row, hitinfo.col); let acStyle = hitinfo.sheet.getActualStyle(hitinfo.row, hitinfo.col), zoom = hitinfo.sheet.zoom(); let textLength = this.getAutoFitWidth(value, text, acStyle, zoom, {sheet: hitinfo.sheet, row: hitinfo.row, col: hitinfo.col, sheetArea: GC.Spread.Sheets.SheetArea.viewport}); //(图标+名字)区域 function withingClickArea(){ return hitinfo.x > centerX + halfBoxLength && hitinfo.x < centerX + halfBoxLength + imgWidth + indent/2+3 + textLength; } if (hitinfo.x > centerX - halfBoxLength && hitinfo.x < centerX + halfBoxLength && hitinfo.y > centerY - halfBoxLength && hitinfo.y < centerY + halfBoxLength) { node.setExpanded(!node.expanded); TREE_SHEET_HELPER.massOperationSheet(hitinfo.sheet, function () { let iCount = node.posterityCount(), i, child; for (i = 0; i < iCount; i++) { child = tree.items[hitinfo.row + i + 1]; hitinfo.sheet.setRowVisible(hitinfo.row + i + 1, child.visible, hitinfo.sheetArea); } hitinfo.sheet.invalidateLayout(); }); hitinfo.sheet.repaint(); } }; TreeCell.prototype.processMouseMove = function (hitInfo) { let sheet = hitInfo.sheet; let div = sheet.getParent().getHost(); let canvasId = div.id + "vp_vp"; /* let canvas = $(`#${canvasId}`)[0]; //改变鼠标图案 if (sheet && hitInfo.isReservedLocation) { canvas.style.cursor='pointer'; return true; }else{ canvas.style.cursor='default'; }*/ return false; }; TreeCell.prototype.processMouseEnter = function (hitinfo) { let text = hitinfo.sheet.getText(hitinfo.row, hitinfo.col); let value = hitinfo.sheet.getValue(hitinfo.row, hitinfo.col); let tag = hitinfo.sheet.getTag(hitinfo.row, hitinfo.col); let acStyle = hitinfo.sheet.getActualStyle(hitinfo.row, hitinfo.col), zoom = hitinfo.sheet.zoom(); let node = me.mainTree.items[hitinfo.row]; let nodeIndent = node ? (node.depth() + 1) * indent + node.depth() * levelIndent + imgWidth + 3 : 0; let textLength = this.getAutoFitWidth(value, text, acStyle, zoom, {sheet: hitinfo.sheet, row: hitinfo.row, col: hitinfo.col, sheetArea: GC.Spread.Sheets.SheetArea.viewport}); let cellWidth = hitinfo.sheet.getCell(-1, hitinfo.col).width(); if(textLength > cellWidth - nodeIndent){ TREE_SHEET_HELPER.showTipsDiv(text,{pos: {}},hitinfo); } }; TreeCell.prototype.processMouseLeave = function (hitinfo) { let me = this; TREE_SHEET_HELPER.tipDiv = 'hide'; if (TREE_SHEET_HELPER._toolTipElement) { $(TREE_SHEET_HELPER._toolTipElement).hide(); TREE_SHEET_HELPER._toolTipElement = null; }; TREE_SHEET_HELPER.tipDivCheck();//延时检查:当tips正在show的时候,就调用了hide方法,会导致tips一直存在,所以设置一个超时处理 }; return new TreeCell(); }, newNode: function (nodeType, nodeName){ // 1 分类 2 块文件 let tree = blockLibObj.mainTree; let pID = -1, nID = -1; let select = tree.selected; let newNode = null; if (nodeType == 1){ if (!select) { nID = -1; } else if (select.data.type == 1){ nID = select.getNextSiblingID(); } else if (select.data.type == 2){ nID = select.parent.getNextSiblingID(); }; newNode = tree.insert(pID, nID); newNode.data.type = 1; newNode.data.name = '分类'; } else if (nodeType == 2) { if (!select) { pID = tree.items[0].getID(); } else if (select.data.type == 1){ pID = select.getID(); } else if (select.data.type == 2){ pID = select.getParentID(); nID = select.getNextSiblingID(); }; newNode = tree.insert(pID, nID); newNode.data.type = 2; newNode.data.name = nodeName; } tree.selected = newNode; let sheet = blockLibObj.mainSheet; sheet.suspendPaint(); sheet.suspendEvent(); let idx = tree.items.indexOf(newNode); sheet.addRows(idx, 1); sheet.getRange(idx, 0, 1, 1).locked(true); sheet.setValue(idx, 0, newNode.data.name); sheet.setSelection(idx, 0, 1, 1); sheet.resumeEvent(); sheet.resumePaint(); } }; $(document).ready(function(){ $('#blockLibTab').on('click', function (){ if ($("#kmbk").is(":visible")){ if (!blockLibObj.mainSpread){ blockLibObj.buildSheet(); }; } }); $('#btn_block_newFolder').on('click', function (){ blockLibObj.newNode(1); }); $('#btn_block_newSubFolder').on('click', function (){ blockLibObj.newNode(2); }); });