在表格绑定中使用区域模板（Range Template）

收藏

本帖最后由 dexteryao 于 2022-1-30 08:34 编辑

前面介绍了单元格中使用区域模板，同理在表格绑定中也能使用区域模板。

由于表格绑定目前还不支持列设置celltype，我们需要在表格绑定后，通过代码给指定区域设置celltype

在下面示例中，给表格第一行设置了celltype，然后使用copyTableStyle方法将内容复制到表格其他行，样式和公式都可以复制。

表格绑定的数据也无法使用sheet绑定中的value方法返回。需要在构建数据源时，数组中设置Range Template的属性，就是一个对象

demo中重新构建了数据，

{list:[{"detail": data[0]}, {"detail": data[1]}, {"detail": data[2]} //可以循环构建

demo 如下，打卡有点慢，请耐心等待主要代码：

import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-tablesheet";
import "./license.js";
import "./templateSheet.js";
import "./data.js";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var dialogSS;
var editorDialog = document.getElementById("editorDialog");
var dialogOK = document.getElementById("dialogOK");
var dialogCancel = document.getElementById("dialogCancel");
var renderSheet = spread.getActiveSheet();
renderSheet.defaults.rowHeight = 207;
var templateSheet = new GC.Spread.Sheets.Worksheet();
templateSheet.fromJSON(templatesheetjson);
spread.addSheet(1, templateSheet);
templateSheet.setFormatter(2, 2, "=IMAGE(@)");
renderSheet.suspendPaint();
var celltype = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet);
// renderSheet.setCellType(0, 1, celltype);
// renderSheet.setBindingPath(0, 1, "detail")
renderSheet.setRowHeight(0, 10)
renderSheet.setColumnWidth(0, 440)
// renderSheet.setColumnWidth(1, 440)
var dataSource = new GC.Spread.Sheets.Bindings.CellBindingSource({ //"detail": data[10],
list: [{ "detail": data[0] }, { "detail": data[1] }, { "detail": data[2] }]
});
renderSheet.setRowHeight(1, 30)
var table = renderSheet.tables.add("tableRecordds", 1, 0, 4, 1);
table.autoGenerateColumns(false);
var tableColumn1 = new GC.Spread.Sheets.Tables.TableColumn();
tableColumn1.name("Detail");
tableColumn1.dataField("detail");
table.bindColumns([tableColumn1]);
table.bindingPath("list")
renderSheet.setDataSource(dataSource)
renderSheet.getRange(2, 0).cellType(celltype)
copyTableStyle(renderSheet, table)
renderSheet.resumePaint();
function copyTableStyle(sheet, table) {
var range = table.dataRange();
var rowHeight = sheet.getRowHeight(range.row);
for (var i = 1; i < range.rowCount; i++) {
// Copy Style
sheet.copyTo(range.row + i - 1, range.col, range.row + i, range.col, 1, range.colCount, GC.Spread.Sheets.CopyToOptions.style);
// Copy Formula
sheet.copyTo(range.row + i - 1, range.col, range.row + i, range.col, 1, range.colCount, GC.Spread.Sheets.CopyToOptions.formula);
// Copy Span
sheet.copyTo(range.row + i - 1, range.col, range.row + i, range.col, 1, range.colCount, GC.Spread.Sheets.CopyToOptions.span);
// Set Row Height
sheet.setRowHeight(range.row + i, rowHeight);
}
}
spread.bind(GC.Spread.Sheets.Events.CellDoubleClick, function (s, e) {
var sheet = e.sheet, row = e.row, col = e.col;
var cellType = sheet.getCellType(row, col);
if (cellType && cellType instanceof GC.Spread.Sheets.CellTypes.RangeTemplate) {
editRangeCell(sheet, row, col);
}
})
function initDialogSpread() {
if (!dialogSS) {
dialogSS = new GC.Spread.Sheets.Workbook(document.getElementById("dialogSS"));
}
dialogSS.options.tabStripVisible = false;
dialogSS.refresh();
}
function setEditorValue(sheet, row, col) {
var cellType = sheet.getCellType(row, col);
if (dialogSS && cellType) {
var json = cellType.toJSON();
var editorSheet = dialogSS.getActiveSheet()
editorSheet.fromJSON(JSON.parse(json.resolvor.templatejson));
console.log(JSON.parse(json.resolvor.templatejson));
var value = JSON.parse(JSON.stringify(sheet.getValue(row, col)))
var dataSource = new GC.Spread.Sheets.Bindings.CellBindingSource(value);
editorSheet.setDataSource(dataSource);
console.log(editorSheet.recalcAll)
editorSheet.recalcAll(true);
}
}
function editRangeCell(sheet, row, col) {
setTimeout(function () {
initDialogSpread()
setEditorValue(sheet, row, col)
}, 10)
editorDialog.style.display = "block"
}
function closeDialog() {
editorDialog.style.display = "none"
}
dialogCancel.onclick = function () {
closeDialog();
}
dialogOK.onclick = function () {
var editorSheet = dialogSS.getActiveSheet()
var cellValue = editorSheet.getDataSource().getSource()
var renderSheet = spread.getActiveSheet();
renderSheet.setValue(renderSheet.getActiveRowIndex(), renderSheet.getActiveColumnIndex(), cellValue)
closeDialog();
console.log(JSON.stringify(renderSheet.getDataSource().getSource()));
}

复制代码

<!doctype html>
<html>
<head>
<title>SpreadJS in TypeScript</title>
<link rel="stylesheet" type="text/css" href="node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
<style>
#editorDialog{
position: fixed;
width: 100%;
height: 100%;
background-color: #aaaaaaaa;
display: none;
top: 0;
}
</style>
</head>
<body>
<div id="ss" style="width:100%;height:98vh;border:1px solid darkgray"></div>
<div id="editorDialog">
<div style="height: 80%; width: 80%;margin: 50px auto;background-color:white">
<button id='dialogOK'>确定</button>
<button id='dialogCancel'>取消</button>
<div id='dialogSS' style="width:100%;height:90%;border:1px solid darkgray"></div>
</div>
</div>
</body>
</html>

复制代码

有心 · 有心

一直加载中，看不到。

dexteryao · dexteryao

有心发表于 2022-1-30 08:29
一直加载中，看不到。

主要代码贴出来了

		自动登录	找回密码
密码			立即注册

在表格绑定中使用区域模板（Range Template）

2 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章

圣诞拼拼乐