自定义单元格

想创建一个你自己的单元格类型。你需要在单元格在展示状态下去绘制它,在编辑状态下自定制编辑器,并且处理鼠标和键盘响应行为。如果内置的单元格类型不支持的功能,那么创建一个定制的单元类型是一个好方法,你可以重新定义属性和函数,从而获得特定的单元格类型来满足你自己的需求。

你可以通过继承 Base 类型来自定制单元格类型,并且实现一些必须的方法,例如 paint , createEditorElement , getEditorValue 等等。完成了这些你就可以使用你的自定制单元格类型了。例如:
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import GC from '@grapecity-software/spread-sheets'; import '@grapecity-software/spread-sheets-resources-zh'; GC.Spread.Common.CultureManager.culture("zh-cn"); import { SpreadSheets, Worksheet} from '@grapecity-software/spread-sheets-react'; import './styles.css'; import { FivePointedStarCellType, FullNameCellType } from "./data"; const Component = React.Component; function _getElementById(id) { return document.getElementById(id); } class App extends Component { constructor(props) { super(props); this.spread = null; this.state = {}; this.autoGenerateColumns = false; } render() { return (<div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}> <Worksheet></Worksheet> </SpreadSheets> </div> </div>); } initSpread(spread) { const sheet = spread.getSheet(0); sheet.suspendPaint(); sheet.setColumnWidth(0, 100); sheet.setColumnWidth(1, 170); const columnInfo = [ { name: "result", displayName: "Result", cellType: new FivePointedStarCellType(), size: 50 }, { name: "person", displayName: "Person", cellType: new FullNameCellType(), size: 170 } ]; const source = [ { result: true, person: {firstName:"LeBron",lastName:"James"}}, { result: false, person: { firstName: "Chris", lastName: "Bosh" } }, { result: true, person: { firstName: "Dwyane", lastName: "Wade" } }, { result: false, person: { firstName: "Mike", lastName: "Miller" } }, { result: true, person: { firstName: "Mike", lastName: "Miller" } }, { result: true, person: { firstName: "Udonis", lastName: "Haslem" } }, { result: true, person: { firstName: "Mario", lastName: "Chalmers" } }, { result: true, person: { firstName: "Joel", lastName: "Anthony" } }, { result: false, person: { firstName: "Shane", lastName: "Battier" } }, { result: false, person: { firstName: "Ray", lastName: "Allen" } }, { result: true, person: { firstName: "James", lastName: "Jones" } }, { result: false, person: { firstName: "Rashard", lastName: "Lewis" } }, { result: true, person: { firstName: "Norris", lastName: "Cole" } }, { result: true, person: { firstName: "Chris", lastName: "Andersen" } }, { result: false, person: { firstName: "Jarvis", lastName: "Varnado" } }, { result: true, person: { firstName: "Juwan", lastName: "Howard" } }, ]; sheet.setDataSource(source); sheet.bindColumns(columnInfo); sheet.resumePaint(); } } ReactDOM.render(<App />, _getElementById('app'));
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/react/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- SystemJS --> <script src="$DEMOROOT$/zh/react/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('$DEMOROOT$/zh/lib/react/license.js').then(function() { System.import('./src/app'); }); </script> </head> <body> <div id="app"></div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets{ height: 100%; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #app { height: 100%; }
import GC from "@grapecity-software/spread-sheets"; const spreadNS = GC.Spread.Sheets; //Custom Cell Type export class FivePointedStarCellType { constructor() { this.size = 10; } } FivePointedStarCellType.prototype = new spreadNS.CellTypes.Base(); FivePointedStarCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) { if (!ctx) { return; } ctx.save(); // draw inside the cell's boundary ctx.rect(x, y, w, h); ctx.clip(); ctx.beginPath(); if (value) { ctx.fillStyle = "orange"; } else { ctx.fillStyle = "gray"; } var size = this.size; var dx = x + w / 2; var dy = y + h / 2; ctx.beginPath(); var dig = Math.PI / 5 * 4; ctx.moveTo(dx + Math.sin(0 * dig) * size, dy + Math.cos(0 * dig) * size); for (var i = 1; i < 5; i++) { ctx.lineTo(dx + Math.sin(i * dig) * size, dy + Math.cos(i * dig) * size); } ctx.closePath(); ctx.fill(); ctx.restore(); }; FivePointedStarCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) { var xm = cellRect.x + cellRect.width / 2, ym = cellRect.y + cellRect.height / 2, size = 10; var info = { x: x, y: y, row: context.row, col: context.col, cellRect: cellRect, sheetArea: context.sheetArea }; if (xm - size <= x && x <= xm + size && ym - size <= y && y <= ym + size) { info.isReservedLocation = true; } return info; }; FivePointedStarCellType.prototype.processMouseUp = function (hitInfo) { var sheet = hitInfo.sheet; if (sheet && hitInfo.isReservedLocation) { var row = hitInfo.row, col = hitInfo.col, sheetArea = hitInfo.sheetArea; var newValue = !sheet.getValue(row, col, sheetArea); var spread = sheet.getParent(); spread.commandManager().execute({cmd: "editCell", sheetName: sheet.name(), row: row, col: col, newValue: newValue}); return true; } return false; }; export class FullNameCellType {} FullNameCellType.prototype = new spreadNS.CellTypes.Base(); FullNameCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) { if (value) { spreadNS.CellTypes.Base.prototype.paint.apply(this, [ctx, value.firstName + "." + value.lastName, x, y, w, h, style, options]); } }; FullNameCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) { if (editorContext) { editorContext.style.width=cellRect.width; editorContext.style.height=100; return {height: 100}; } }; FullNameCellType.prototype.createEditorElement = function () { var div = document.createElement("div"); div.setAttribute("gcUIElement", "gcEditingInput"); div.style.backgroundColor= "white"; div.style.overflow= "hidden"; var span1 = document.createElement('span'); span1.style.display = "block"; var span2 = document.createElement("span"); span2.style.display = "block"; var input1 = document.createElement("input"); var input2 = document.createElement("input"); var type = document.createAttribute('type'); type.nodeValue="text"; var clonedType = type.cloneNode(true); input1.setAttributeNode(type); input2.setAttributeNode(clonedType); div.appendChild(span1); div.appendChild(input1); div.appendChild(span2); div.appendChild(input2); return div; }; FullNameCellType.prototype.getEditorValue = function (editorContext) { if (editorContext && editorContext.children.length === 4) { var input1 = editorContext.children[1]; var firstName = input1.value; var input2 = editorContext.children[3]; var lastName = input2.value; return { firstName: firstName, lastName: lastName }; } }; FullNameCellType.prototype.setEditorValue = function (editorContext, value) { if (editorContext && editorContext.children.length === 4) { var span1 = editorContext.children[0]; span1.innerHTML="First Name:"; var span2 = editorContext.children[2]; span2.innerHTML="Last Name:"; if (value) { var input1 = editorContext.children[1]; input1.value=value.firstName; var input2 = editorContext.children[3]; input2.value=value.lastName; } } }; FullNameCellType.prototype.isReservedKey = function (e) { //cell type handle tab key by itself return (e.keyCode === GC.Spread.Commands.Key.tab && !e.ctrlKey && !e.shiftKey && !e.altKey); }; FullNameCellType.prototype.isEditingValueChanged = function(oldValue, newValue) { if (newValue.firstName != oldValue.firstName || newValue.lastName != oldValue.lastName) { return true; } return false; };
(function(global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@grapecity-software/spread-sheets': 'npm:@grapecity-software/spread-sheets/index.js', '@grapecity-software/spread-sheets-resources-zh': 'npm:@grapecity-software/spread-sheets-resources-zh/index.js', '@grapecity-software/spread-sheets-react': 'npm:@grapecity-software/spread-sheets-react/index.js', '@grapecity-software/jsob-test-dependency-package/react-components': 'npm:@grapecity-software/jsob-test-dependency-package/react-components/index.js', 'react': 'npm:react/umd/react.production.min.js', 'react-dom': 'npm:react-dom/umd/react-dom.production.min.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);