表单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: 90%;

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>

<h4 class="mb0">隐藏与显示</h4>

点击按钮，隐藏或显示表单</p>

<p style="width: 90%" class="m0 ">输入1为原大小，2为原来的两倍，0.5为原来的50%，以此类推 </p>

<h4 class="mb0">合并单元格</h4>

<div>

<label for="drag" >允许用户拖拽合并单元格</label>

</div>

<h4 class="mb0">行头与列头</h4>

<div>

</div>

<div>

</div>

<h4 class="mb0">边框网格线</h4>

<p style="width: 90%" class="m0 ">刷新当前页面，点击展示，表格中展示边界线、网格线、对角线示例</p>

<div>

<label for="gridline_show" >显示横向网格线</label>

</div>

<div>

<label for="gridline_show1" >显示纵向网格线</label>

</div>

<h4 class="mb0">获取与设置数据</h4>

</div>

</div>

</body>

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();

});

</script>

</html>

推荐阅读更多精彩内容