body {
background: rgb(250, 250, 250);
color: #333;
}
#ss {
border: 1px #ccc solid;
}
.container {
width: 90%;
background: rgb(250, 250, 250);
margin: 0 auto;
height: 600px;
}
.full-height {
height: 100%;
}
.left{
height: 100%;
overflow: auto;
}
表单
隐藏与显示
点击按钮,隐藏或显示表单
缩放
输入1为原大小,2为原来的两倍,0.5为原来的50%,以此类推
合并单元格
行头与列头
边框 网格线
刷新当前页面,点击展示,表格中展示边界线、网格线、对角线示例
冻结行列
获取与设置数据
var spreadNS = GC.Spread.Sheets;
$(document).ready(function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
spread.options.tabStripRatio = 0.7;
var sheet = spread.getActiveSheet();
//新增一个特定的表单
// var nsheet= new GC.Spread.Sheets.Worksheet('新表单');
// spread.addSheet(0,nsheet)
// // //设置表单名
// nsheet.name('设置表单名');
// 删除表单
document.getElementById("dele").addEventListener('click',function() {
spread.removeSheet(0);
});
// 新增
document.getElementById("add").addEventListener('click',function() {
spread.addSheet(spread.getSheetCount());
});
// 清空
document.getElementById("clear").addEventListener('click',function() {
spread.clearSheets();
});
/*-----------------------隐藏与显示----------------------*/
// 显示
document.getElementById("visib").addEventListener('click',function() {
for (var i = 0; i < spread.sheets.length; i++) {
if (!spread.sheets[i].visible()) {
spread.sheets[i].visible(true);
break;
}
}
});
// 隐藏
document.getElementById("hide").addEventListener('click',function() {
var sheet = spread.getActiveSheet();
if (sheet) {
sheet.visible(false);
}
});
/*--------------------------------缩放--------------------------*/
document.getElementById("sure").addEventListener('click',function() {
let num = document.getElementById('scale').value;
sheet.zoom(num);
});
/*--------------------------边框网格线--------------------------*/
document.getElementById('gridline_show').checked = true;
document.getElementById('gridline_show1').checked = true;
// 横向网格线显示隐藏
document.getElementById('gridline_show').addEventListener('change', function() {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.options.gridline.showHorizontalGridline = this.checked;
sheet.resumePaint();
});
// 纵向网格线显示隐藏
document.getElementById('gridline_show1').addEventListener('change', function() {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
console.log( this.checked);
sheet.options.gridline.showVerticalGridline = this.checked;
sheet.resumePaint();
});
// 展示新表单
document.getElementById('show').addEventListener('click', function() {
var lineBorder1 = new spreadNS.LineBorder('blue', spreadNS.LineStyle.thin);
var range = sheet.getRange(13, 1, 3, 5);
sheet.suspendPaint();
range.setBorder(lineBorder1, { outline: true });
range.borderLeft(new spreadNS.LineBorder('orange', spreadNS.LineStyle.double));
range.borderTop(new spreadNS.LineBorder('green', spreadNS.LineStyle.medium));
range.borderRight(new spreadNS.LineBorder('black', spreadNS.LineStyle.dashed));
sheet.getCell(13, 1).diagonalDown(new GC.Spread.Sheets.LineBorder('blue',GC.Spread.Sheets.LineStyle.slantedDashDot));
sheet.getCell(13, 2).diagonalUp(new GC.Spread.Sheets.LineBorder('blue',GC.Spread.Sheets.LineStyle.dotted));
sheet.resumePaint();
});
/*----------------------------单元格-------------------------*/
sheet.addSpan(1,1,3,3);
sheet.setValue(1,1,'合并单元格');
sheet.addSpan(8,1,5,3);
sheet.getCell(8,1).value('清除合并');
// 删除合并
sheet.removeSpan(8,1);
document.getElementById('drag').addEventListener('change', function() {
spread.options.allowUserDragMerge = this.checked;
});
// 允许单元格溢出
sheet.options.allowCellOverflow = false;
/*---------------------------------行头与列头--------------------*/
// 行头、列头可以显示 数字字母或空白
// 行头列头隐藏/显示
document.getElementById('colHeader').checked = true;
document.getElementById('rowHeader').checked = true;
document.getElementById('rowHeader').addEventListener('click', function() {
var sheet = spread.getActiveSheet();
sheet.options.rowHeaderVisible = this.checked;
});
document.getElementById('colHeader').addEventListener('click', function() {
var sheet = spread.getActiveSheet();
sheet.options.colHeaderVisible = this.checked;
});
// 展示行头列头新表
let newsheet = new GC.Spread.Sheets.Worksheet('colheader');
newsheet.suspendPaint();
// 列头显示数字 letters blank
newsheet.options.colHeaderAutoText = GC.Spread.Sheets.HeaderAutoText.numbers;
spread.addSheet(1,newsheet);
var spreadNS = GC.Spread.Sheets;
// 设置了3行列头 SheetArea :colHeader corner rowHeader viewport
newsheet.setRowCount(3, spreadNS.SheetArea.colHeader);
newsheet.addSpan(0, 0, 1, 3, GC.Spread.Sheets.SheetArea.colHeader);
newsheet.setValue(0, 0, "合并列", GC.Spread.Sheets.SheetArea.colHeader);
newsheet.setValue(1, 0, "姓名", GC.Spread.Sheets.SheetArea.colHeader);
newsheet.setValue(1, 1, "性别", GC.Spread.Sheets.SheetArea.colHeader);
newsheet.resumePaint();
/*--------------------------------行与列---------------------*/
sheet.setRowCount(100, GC.Spread.Sheets.SheetArea.viewport);
sheet.setColumnCount(15, GC.Spread.Sheets.SheetArea.viewport);
sheet.addRows(0, 2); // 从第0行开始增加两行
sheet.deleteRows(11, 1);
sheet.setColumnResizable(5, false);// 拖拽改变11列大小
sheet.setRowResizable(11, true);
sheet.setRowResizable(12, false); // 第13行大小不可改变
sheet.setRowVisible(1, false);
sheet.getRowHeight(7); // 获取行高
sheet.setRowHeight(11,50);
sheet.setValue(0,1,'autoFitColumn测试');
sheet.autoFitColumn(1);
/*--------------------------------冻结行列---------------------*/
sheet.suspendPaint();
sheet.frozenRowCount(3);
sheet.frozenColumnCount(3);
sheet.frozenTrailingRowCount(3);
sheet.frozenTrailingColumnCount(1);
sheet.options.frozenlineColor = 'red';
sheet.resumePaint();
/*----------------------------获取与设置数据----------------------*/
sheet.suspendPaint();
sheet.setValue(5,4,'复制1');
sheet.setValue(6,4,'复制2');
//获取或设置一系列值给一片区域内的单元格
sheet.setArray(12, 4, [['setArray','value2','value3','value4'], ['value5','value6','value7','value8']]);
sheet.getArray(12, 4, 2, 4);
document.getElementById('copy').addEventListener('click', function() {
var spreadNS = GC.Spread.Sheets;
// 行索引5 列索引4 复制到 行索引6,列索引5,复制2行1列
sheet.copyTo(5, 4, 6, 5, 2, 1, spreadNS.CopyToOptions.all);
});
sheet.resumePaint();
});