html代码：
<link rel="stylesheet" type="text/css" href="../wsql/exec?sk=gc.spread.sheets.12.2.1.css" />
<style>
body {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<div id="container" style="position: relative;height:96%;display:flex;flex-direction: column;">
<div id="spread" style="flex:1;"></div>
</div>
js代码：
window.lc();
const GcSpread = GC.Spread;
const SpreadNS = GcSpread.Sheets;
const Spread = SpreadNS.Workbook;
//// region 基础用法
var excelio = new GC.Spread.Excel.IO(); // 导入导出组件
GC.Spread.Common.CultureManager.culture("zh-cn");//应用汉化
var spread = new GC.Spread.Sheets.Workbook( // spread核心组件
document.getElementById('spread'),
{
sheetCount: 1,
scrollbarShowMax: false,
scrollbarMaxAlign: true,
tabNavigationVisible: false,
tabStripVisible: false,
newTabVisible: false,
}
);
//spreadInit();
//初始化表单皮肤
initSpread(spread);
let sheet = spread.getActiveSheet();
//设置整行选择模式
selectionPattern(spread);
//隐藏默认序号列
sheet.setColumnVisible(0, false, SpreadNS.SheetArea.rowHeader);
//设置表头
var colHeader = SpreadNS.SheetArea.colHeader;
sheet.setRowCount(2, colHeader);
sheet.setColumnCount(6);
setHeader(sheet, colHeader);
refreshScrollBar(spread);
spread.options.grayAreaBackColor = 'white';
// function spreadInit() {
// }
window.sp = spread;
//初始化表单皮肤
function initSpread(spread) {
if (!spread) {
console.warn('spread表格对象不能为空');
return;
}
var sheet = spread.getActiveSheet();
spread.options.referenceStyle = SpreadNS.ReferenceStyle.R1C1;
sheet.suspendPaint();//停止重绘
//设置初始行数为0行
sheet.setRowCount(0)
//设置公共配置
var colcount = sheet.getColumnCount();
sheet.selectionPolicy(GC.Spread.Sheets.SelectionPolicy.range);
spread.options.selectionBackColor = 'rgba(86,180,255,0.3)'
spread.options.selectionBorderColor = '#CCE8FF'
sheet.defaults.rowHeight = 30;
var style = new SpreadNS.Style();
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.font = "11pt SimSun";
sheet.setDefaultStyle(style);
// 边框
const lineBorder = new SpreadNS.LineBorder(
"#B0C4DE",
SpreadNS.LineStyle.thin
);
for (let index = 0; index < colcount; index++) {
//"#B0C4DE"亮钢蓝边线
sheet.getRange(-1, index).borderBottom(lineBorder);
sheet.getRange(-1, index).borderTop(lineBorder);
sheet.getRange(-1, index).borderLeft(lineBorder);
sheet.getRange(-1, index).borderRight(lineBorder);
sheet.getRange(-1, index, SpreadNS.SheetArea.colHeader).borderBottom(lineBorder);
sheet.getRange(-1, index, SpreadNS.SheetArea.colHeader).borderTop(lineBorder);
sheet.getRange(-1, index, SpreadNS.SheetArea.colHeader).borderLeft(lineBorder);
sheet.getRange(-1, index, SpreadNS.SheetArea.colHeader).borderRight(lineBorder);
}
//改变表头的宽度触发的方法
sheet.bind(GC.Spread.Sheets.Events.ColumnWidthChanged, function (e, info) {
refreshXScrollBar(spread, sheet)
});
//设置表单保护
sheet.options.isProtected = true;
sheet.resumePaint();//重绘
}
//设置表头
function setHeader(sheet, colHeader) {
//设置表头第一行内容
sheet.setValue(0, 0, '序号', colHeader);
sheet.setValue(0, 1, '选择', colHeader);
sheet.setValue(0, 2, '账号', colHeader);
sheet.setValue(0, 3, '姓名', colHeader);
sheet.setValue(0, 4, '手机号', colHeader);
sheet.setValue(0, 5, '密码', colHeader);
//设置表头第二行内容
var a = 0;
for (var i = 0; i < sheet.getColumnCount(); i++) {
if (i == 0) {
sheet.setValue(1, i, '栏次', colHeader);
} else {
a++;
sheet.setValue(1, i, a, colHeader);
}
}
//绑定表头字段
sheet.bindColumn(0, { name: 'rn', displayName: '栏次', size: 50 });
sheet.bindColumn(1, { name: 'ck', displayName: '1', size: 50 });
sheet.bindColumn(2, { name: 'code', displayName: '2', size: 200 });
sheet.bindColumn(3, { name: 'name', displayName: '3', size: 120 });
sheet.bindColumn(4, { name: 'mobile', displayName: '4', size: 200 });
sheet.bindColumn(5, { name: 'pwd', displayName: '5', size: 120 });
//允许用户改变列宽
sheet.options.protectionOptions.allowResizeColumns = true;
//定义复选列的CellType
var cellType = new GC.Spread.Sheets.CellTypes.CheckBox();
cellType.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right);
cellType.isThreeState(false);
sheet.getRange(-1, 1, -1, 1).cellType(cellType);
//解锁复选列
sheet.getRange(-1, 1, -1, 1).locked(false);
}
// 设置单击选中行
function selectionPattern(spread) {
if (!spread) {
console.warn('spread对象不能为空');
return;
}
//获取当前sheet页
const sheet = spread.getActiveSheet();
// 设置单击选中行
sheet.selectionUnit(GC.Spread.Sheets.SelectionUnit.row);
sheet.selectionPolicy(GC.Spread.Sheets.SelectionPolicy.range);
spread.options.selectionBackColor = 'rgba(86,180,255,0.3)';
spread.options.selectionBorderColor = '#CCE8FF';
}
//控制X和Y轴滚动条是否显示或隐藏
function refreshScrollBar(spreadObj) {
if (!spreadObj) {
console.warn('表格对象不能为空');
return;
}
//x轴滚动条计算方法
refreshXScrollBar(spreadObj);
//y轴滚动条计算方法
refreshYScrollBar(spreadObj);
}
//控制X轴滚动条是否显示或隐藏
function refreshXScrollBar(spread, sheet) {
if (!spread) {
console.warn('spread表格对象不能为空');
return;
}
sheet = sheet == null ? spread.getActiveSheet() : sheet;
let colCount = sheet.getColumnCount() // 总列数
let rcol = sheet.getViewportRightColumn(1) // 视图列数
console.log('colCount', colCount);
console.log('rcol', rcol);
if (colCount === rcol + 1) {
spread.options.showHorizontalScrollbar = false
} else if (colCount > rcol + 1) {
spread.options.showHorizontalScrollbar = true
}
}
//控制Y轴滚动条是否显示或隐藏
function refreshYScrollBar(spread) {
if (!spread) {
console.warn('spread表格对象不能为空');
return;
}
const sheet = spread.getActiveSheet();
if ((sheet.getViewportBottomRow(1) + 1) >= sheet.getRowCount() && sheet.getViewportTopRow(1) <= 0) {
spread.options.showVerticalScrollbar = false;
} else {
spread.options.showVerticalScrollbar = true;
}
}
麻烦给看一下吧，谢谢 |
陕公网安备：61019002000258 |
隐私政策 |
网站地图