表单2-1

<!DOCTYPE html>

<head>

<title>SpreadJS Demo : 表单Ⅱ</title>

<!-- Local Reference

-->

<style>

body {

background: rgb(250, 250, 250);

color: #333;

}

#ss {

border: 1px #ccc solid;

}

.container {

width: 95%;

background: rgb(250, 250, 250);

margin: 0 auto;

height: 600px;

}

.full-height {

height: 100%;

}

.left{

height: 100%;

overflow: auto;

}

</style>

</head>

<body>

<h3>SpreadJS Demo : 表单Ⅱ</h3>

</div>

<h5>

<li class="inline-block mr1"><a class="btn" href="https://www.grapecity.com.cn/developer/spreadjs "

target="_blank ">产品官网</a></li>

<li class="inline-block mr1"><a class="" href="https://gcdn.grapecity.com.cn/showforum-185-1.html "

target="_blank ">论坛求助</a></li>

<li class="inline-block mr1"><a class="" href="https://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples "

target="_blank ">更多示例</a></li>

</ul>

</h5>

</div>

右侧表格黑框中输入数字，其后可自动计算出结果</p>

名为字体的表单中有字体的样式例子</p>

名为样式的表单中C3单元格设置了样式，字体为红色，输入的内容会竖直方向展示</p>

<h4 class="mb0">精确选择单元格</h4>

最小选择单元：</p>

可选择：</p>

键盘WASD对应导航活动单元格行为</p>

<h4 class="mb0">自定义行为</h4>

撤销操作快捷键：ctrl+z 取消撤销：ctrl+y</p>

<button id="setBackColor">设置背景色</button>

</div>

</div>

</body>

var spreadNS = GC.Spread.Sheets;

$(document).ready(function () {

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));

var spreadNS = GC.Spread.Sheets;

let newsheet = new GC.Spread.Sheets.Worksheet('公式');

spread.addSheet(0,newsheet);

spread.options.tabStripRatio=0.8;

/*---------------------------公式-------------------------*/

var sheet = spread.getActiveSheet();

sheet.setValue(1,1,'计算器:');

var lineStyle = GC.Spread.Sheets.LineStyle.medium;

var lineBorder = new GC.Spread.Sheets.LineBorder('black',lineStyle);

var range = sheet.getRange(2,1,1,1);

range.setBorder(lineBorder,{outline:true});

sheet.setValue(2,2,'+');

range = sheet.getRange(2,3,1,1);

range.setBorder(lineBorder,{outline:true});

sheet.setValue(2,4,'=');

sheet.setFormula(2,5,'=SUM(B3,D3)');

/*---------------------------字体------------------------*/

let fontStyleSheet = new GC.Spread.Sheets.Worksheet('字体');

fontStyleSheet.suspendPaint();

fontStyleSheet.getCell(2,1).text('不').font('normal 15px normal');

fontStyleSheet.getCell(3,1).text('同').font('normal 20px normal');

fontStyleSheet.getCell(4,1).text('大').font('normal 25px normal');

fontStyleSheet.getCell(5,1).text('小').font('normal 30px normal');

fontStyleSheet.setRowHeight(2,50);

fontStyleSheet.setRowHeight(3,50);

fontStyleSheet.setRowHeight(4,50);

fontStyleSheet.setRowHeight(5,50);

fontStyleSheet.getCell(3,2).text('加').font('normal 15px normal');

fontStyleSheet.getCell(4,2).text('粗').font('bold 15px normal');

fontStyleSheet.getCell(3,3).text('倾').font('normal 15px normal');

fontStyleSheet.getCell(4,3).text('邪').font('italic 15px normal');

fontStyleSheet.getCell(2, 4).text('各').textDecoration(GC.Spread.Sheets.TextDecorationType.underline);

fontStyleSheet.getCell(3, 4).text('种').textDecoration(GC.Spread.Sheets.TextDecorationType.doubleUnderline);

fontStyleSheet.getCell(4, 4).text('画').textDecoration(GC.Spread.Sheets.TextDecorationType.lineThrough);

fontStyleSheet.getCell(5, 4).text('线').textDecoration(GC.Spread.Sheets.TextDecorationType.overline);

fontStyleSheet

.getCell(2, 6)

.text('对')

.vAlign(GC.Spread.Sheets.VerticalAlign.top)

.hAlign(GC.Spread.Sheets.HorizontalAlign.left);

fontStyleSheet

.getCell(3, 6)

.text('齐')

.vAlign(GC.Spread.Sheets.VerticalAlign.center)

.hAlign(GC.Spread.Sheets.HorizontalAlign.center);

fontStyleSheet

.getCell(4, 6)

.text('方')

.vAlign(GC.Spread.Sheets.VerticalAlign.bottom)

.hAlign(GC.Spread.Sheets.HorizontalAlign.right);

fontStyleSheet

.getCell(5, 6)

.text('式')

.vAlign(GC.Spread.Sheets.VerticalAlign.bottom)

.hAlign(GC.Spread.Sheets.HorizontalAlign.left);

fontStyleSheet.getCell(2, 7).text('字体色').foreColor('red');

fontStyleSheet.getCell(3, 7).text('背景色').foreColor('blue');

fontStyleSheet.getCell(4, 7).text('字体色').foreColor('green');

fontStyleSheet.getCell(3, 7).backColor('gray');

fontStyleSheet.setRowHeight(0,60);

fontStyleSheet.getCell(0, 1).text('这里可以换行').wordWrap(false);// 换行

fontStyleSheet.getCell(0, 2).text('缩进').textIndent(1);// 缩进

fontStyleSheet.getCell(0, 3).text('字号自匹配').shrinkToFit(true);//自动匹配字号

fontStyleSheet.resumePaint();

spread.addSheet(0,fontStyleSheet);

/*--------------------------样式---------------------------*/

// 构造一个样式，设置不同的属性，将构造的样式赋值给单元格

let StyleSheet = new GC.Spread.Sheets.Worksheet('样式');

StyleSheet.suspendPaint();

var myStyle = new GC.Spread.Sheets.Style();

myStyle.backColor = 'yellow';

myStyle.foreColor = 'red';

myStyle.isVerticalText = 'true';

StyleSheet.setStyle(2,2,myStyle,GC.Spread.Sheets.SheetArea.viewport);

StyleSheet.setStyle(0,3,myStyle,GC.Spread.Sheets.SheetArea.colHeader);

StyleSheet.setRowHeight(2,100);

StyleSheet.setColumnWidth(1,200);

StyleSheet.setRowHeight(5,80);

StyleSheet.getCell(5,1).text('设置单元格内边距').watermark('请输入姓名：')

.cellPadding('20 0 0 15 ').labelOptions({

foreColor: '#333333',

visibility: 0,

font: '10px Arial',

margin: '2 0 0 0'

});;

StyleSheet.resumePaint();

spread.addSheet(0,StyleSheet);

/*-----------------------------精确选择单元格-----------------*/

document.getElementById("cell").addEventListener('click',function() {

var sheet = spread.getActiveSheet();

sheet.selectionUnit(0); // 单元格

});

document.getElementById("row").addEventListener('click',function() {

var sheet = spread.getActiveSheet();

sheet.selectionUnit(1); // 行

});

document.getElementById("col").addEventListener('click',function() {

var sheet = spread.getActiveSheet();

sheet.selectionUnit(2); // 列

});

document.getElementById("sig").addEventListener('click',function() {

var sheet = spread.getActiveSheet();

sheet.selectionPolicy(0); // 单元格

});

document.getElementById("range").addEventListener('click',function() {

var sheet = spread.getActiveSheet();

sheet.selectionPolicy(1); // 区域

});

document.getElementById("mrange").addEventListener('click',function() {

var sheet = spread.getActiveSheet();

sheet.selectionPolicy(2); // 多区域

});

/*--------------------------表单行为-------------------*/

// name, command, key, ctrl, shift, alt, meta

var commandManager = spread.commandManager();

commandManager.register(

'customNavigationUp',

GC.Spread.Sheets.Commands.navigationUp,

'W'.charCodeAt(0),

false,

false

);

commandManager.register(

'customNavigationLeft',

GC.Spread.Sheets.Commands.navigationLeft,

'A'.charCodeAt(0),

false,

false

);

commandManager.register(

'customNavigationDown',

GC.Spread.Sheets.Commands.navigationDown,

'S'.charCodeAt(0),

false,

false

);

commandManager.register(

'customNavigationRight',

GC.Spread.Sheets.Commands.navigationRight,

'D'.charCodeAt(0),

false,

false

);

/*--------------------------自定义行为-------------------*/

var undoManager = spread.undoManager();

document.getElementById("undo").addEventListener('click',function() {

undoManager.undo();

});

document.getElementById("redo").addEventListener('click',function() {

undoManager.redo();

});

document.getElementById("setBackColor").addEventListener('click',function() {

var sheet = spread.getActiveSheet();

var command = {

canUndo: true,

execute: function(spread, options, isUndo) {

var Commands = GC.Spread.Sheets.Commands;

if (isUndo) {

Commands.undoTransaction(spread, options);

return true;

} else {

Commands.startTransaction(spread, options);

spread.suspendPaint();

var selections = options.selections;

var value = options.backColor;

selections.forEach(function(sel) {

sheet.getRange(sel.row, sel.col, sel.rowCount, sel.colCount).backColor(value);

});

spread.resumePaint();

Commands.endTransaction(spread, options);

return true;

}

};

var selections = sheet.getSelections();

var commandManager = spread.commandManager();

commandManager.register('changeBackColor', command);

commandManager.execute({

cmd: 'changeBackColor',

sheetName: spread.getSheet(0).name(),

selections: selections,

backColor: 'red'

});

</script>

</html>

表单2-1

推荐阅读更多精彩内容