Spread 提供了多种的线型样式来帮助你自定制表单的边界线和网格线, 例如细线型, 点线型, 双线型等等。例如, 以下代码改变了指定区域的左边和右边的边界线为点线型。
Spread 提供了两种对角线线型:向上对角线和向下对角线.
diagonalDown
diagonalUp
例如可以通过如下方法来设置单元格的对角线
你可以添加、删除网格线或者用下面的代码来设置网格线的颜色：
你可以设置 sheetAreaOffset 属性来设置表单绘制区域相对于左上角的偏移量。这样表单的绘制区域将具有足够的空间来绘制左/上边框和选择框
sheetAreaOffset 默认值为 { left:0 , top:0 }。
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import '@grapecity-software/spread-sheets-resources-zh';
GC.Spread.Common.CultureManager.culture("zh-cn");
import {SpreadSheets, Worksheet} from '@grapecity-software/spread-sheets-react';
import GC from '@grapecity-software/spread-sheets';
import './styles.css';
const Component = React.Component, useState = React.useState, spreadNS = GC.Spread.Sheets, SheetArea = spreadNS.SheetArea;
function _getElementById(id) {
return document.getElementById(id);
}
class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.state = {
isGridLinePanel: true
};
}
initSpread(spread) {
let self = this;
self.spread = spread;
spread.addSheet(1);
this.initSheetBorderAndGridLine();
this.initSheetAreaSheet();
let gridlineSheet = spread.getSheet(0);
spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function(e, args) {
let isGridLinePanel;
if (args.newSheet === gridlineSheet) {
isGridLinePanel = true;
} else {
isGridLinePanel = false;
}
self.setState({isGridLinePanel: isGridLinePanel});
});
}
initSheetBorderAndGridLine() {
let spread = this.spread;
let sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
let lineBorder1 = new spreadNS.LineBorder('blue', spreadNS.LineStyle.thin);
let range = sheet.getRange(7, 1, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderLeft(new spreadNS.LineBorder('red', spreadNS.LineStyle.double));
range = sheet.getRange(7, 4, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderTop(new spreadNS.LineBorder('green', spreadNS.LineStyle.medium));
range = sheet.getRange(7, 7, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderRight(new spreadNS.LineBorder('black', spreadNS.LineStyle.dashed));
range = sheet.getRange(7, 10, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderBottom(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted));
range = sheet.getRange(11, 1, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.thick), { all: true });
range.diagonalUp(new spreadNS.LineBorder('orange', spreadNS.LineStyle.thin));
range = sheet.getRange(11, 4, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.hair), { all: true });
range.diagonalDown(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted));
range = sheet.getRange(11, 7, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.mediumDashed), { all: true });
range.diagonalUp(new spreadNS.LineBorder('plum', spreadNS.LineStyle.double));
range.diagonalDown(new spreadNS.LineBorder('brown', spreadNS.LineStyle.thick));
range = sheet.getRange(11, 10, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.dashDot), { all: true });
range = sheet.getRange(17, 1, 2, 5);
range.setBorder(lineBorder1, { outline: true });
range = sheet.getRange(17, 1, 2, 2);
range.setBorder(new spreadNS.LineBorder('brown', spreadNS.LineStyle.slantedDashDot), { inside: true });
range = sheet.getRange(17, 4, 2, 2);
range.setBorder(new spreadNS.LineBorder('brown', spreadNS.LineStyle.mediumDashed), { inside: true });
range = sheet.getRange(16, 7, 7, 4);
range.setBorder(new spreadNS.LineBorder('plum', spreadNS.LineStyle.thick), {
left: true,
bottom: true
});
range = sheet.getRange(15, 8, 7, 4);
range.setBorder(new spreadNS.LineBorder('royalblue', spreadNS.LineStyle.slantedDashDot), {
top: true,
right: true
});
range = sheet.getRange(16, 8, 6, 3);
range.setBorder(new spreadNS.LineBorder('tomato', spreadNS.LineStyle.dashDot), {
left: true,
bottom: true
});
range = sheet.getRange(16, 8, 6, 3);
range.setBorder(new spreadNS.LineBorder('palegreen', spreadNS.LineStyle.mediumDashed), {
top: true,
right: true
});
range = sheet.getRange(16, 9, 5, 2);
range.setBorder(new spreadNS.LineBorder('violet', spreadNS.LineStyle.dotted), {
left: true,
bottom: true
});
range = sheet.getRange(17, 8, 5, 2);
range.setBorder(new spreadNS.LineBorder('skyblue', spreadNS.LineStyle.hair), {
top: true,
right: true
});
sheet.addSpan(17, 9, 2, 1);
range = sheet.getRange(17, 9, 2, 1);
range.setBorder(new spreadNS.LineBorder('purple', spreadNS.LineStyle.thin), { all: true });
sheet.setArray(1, 3, [
[ 'Gender', 'Phone Number', 'Address' ],
[ 'woman', '021-432668', 'Chester Road' ],
[ 'man', '021-432238', 'Gertt Road' ],
[ 'man', '021-432533', 'Jnyliner Road' ],
[ 'man', '021-432125', 'Approach Road' ]
]);
let style = new GC.Spread.Sheets.Style();
style.wordWrap = true;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
sheet.setStyle(1, 2, style, 3);
sheet.setText(1, 2, ' info name', spreadNS.SheetArea.viewport);
let cell = sheet.getCell(1, 2);
cell.diagonalDown(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted));
sheet.setStyle(1, 3, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.setStyle(1, 4, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.setStyle(1, 5, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.setText(2, 2, 'John', spreadNS.SheetArea.viewport);
sheet.setText(3, 2, 'linda', spreadNS.SheetArea.viewport);
sheet.setText(4, 2, 'henry', spreadNS.SheetArea.viewport);
sheet.setText(5, 2, 'smith', spreadNS.SheetArea.viewport);
sheet.setRowHeight(1, 30);
sheet.setColumnWidth(4, 120);
sheet.setColumnWidth(5, 120);
range = sheet.getRange(1, 2, 5, 4);
range.setBorder(new spreadNS.LineBorder('black', spreadNS.LineStyle.thin), { all: true });
sheet.resumePaint();
}
initSheetAreaSheet() {
let sheet = this.spread.getSheet(1);
sheet.suspendPaint();
sheet.name('SheetAreaOffset');
let data = sheetAreaJSON;
sheet.fromJSON(data);
sheet.options.colHeaderVisible = false;
sheet.options.rowHeaderVisible = false;
sheet.options.sheetAreaOffset = {
left: 2,
top: 2
};
let range = sheet.getRange(0, 0, 3, 10);
range.setBorder(new spreadNS.LineBorder('black', spreadNS.LineStyle.double), {
left: true,
bottom: true,
top: true,
right: true
});
sheet.resumePaint();
}
setGridline ($event) {
let sheet = this.spread.getActiveSheet();
sheet.suspendPaint();
sheet.options.gridline.showHorizontalGridline = $event.target.checked;
sheet.options.gridline.showVerticalGridline = $event.target.checked;
sheet.resumePaint();
}
setHeaderVisible ($event) {
let sheet = this.spread.getActiveSheet();
sheet.options.rowHeaderVisible = $event.target.checked;
sheet.options.colHeaderVisible = $event.target.checked;
}
setOffset (position) {
let sheet = this.spread.getActiveSheet();
let left = position.left,
top = position.top;
sheet.options.sheetAreaOffset = {
left: parseInt(left, 10),
top: parseInt(top, 10)
}
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<Panel
isGridLinePanel={this.state.isGridLinePanel}
setGridline={(e) => this.setGridline(e)}
setHeaderVisible={(e) => this.setHeaderVisible(e)}
setOffset={(position) => this.setOffset (position)}
></Panel>
</div>
);
}
}
function TextInput(props) {
const [value, setValue] = useState(props.value);
return (
<input type="text" value={value} onChange={(e) => {
setValue(e.target.value);
props.onChange(e)
}}/>
);
}
function CheckBoxInput(props) {
const [checked, setChecked] = useState(props.checked);
return (
<input type="checkbox" id={props.id} checked={checked} onChange={(e) => {
setChecked(e.target.checked);
props.onChange(e);
}}/>
);
}
class Panel extends Component {
constructor(props) {
super(props);
this.left = "";
this.top = "";
}
render () {
let props = this.props, panel;
if (props.isGridLinePanel) {
panel = (
<div className="options-container">
<div className="options-row">
<CheckBoxInput id="showGridLine" checked={false} onChange={props.setGridline}></CheckBoxInput>
<label htmlFor="showGridLine">ShowGridLine</label>
</div>
</div>
);
} else {
panel = (
<div className="options-container">
<div className="options-row">
<CheckBoxInput id="headerVisible" checked={false} onChange={props.setHeaderVisible}></CheckBoxInput>
<label htmlFor="headerVisible">HeaderVisible</label>
</div>
<div className="options-row">
<label htmlFor="left">left:</label>
<TextInput id="left" value={this.left} onChange={(e) => {this.left = e.target.value;}}></TextInput>
</div>
<div className="options-row">
<label htmlFor="top">right:</label>
<TextInput id="top" value={this.top} onChange={(e) => {this.top = e.target.value;}}></TextInput>
</div>
<div className="options-row">
<input type="button" value="Set Sheet Area Offset" onClick={() => {let position = {left:this.left, top:this.top};props.setOffset(position);}}/>
</div>
</div>
);
}
return panel;
}
}
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">
<script src="$DEMOROOT$/spread/source/data/sheetAreaData.js" type="text/javascript"></script>
<!-- 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 {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.options-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
input {
display: inline-block;
}
input[type="text"] {
width: 200px;
}
label {
width: 40px;
display: inline-block;
margin-bottom: 6px;
}
(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);
