[{"id":"ff052704-1389-4029-bcdd-73c6cbe9f807","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"8e72e33e-b4ab-4fb3-98fc-a0b148134aed","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"c90d5fdf-420f-4978-8bf5-c9a2bb4334b3","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"900e6cab-065d-4f1c-844d-efa3c074e270","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"760b37c7-c713-4b24-b9ba-4bfe7d8437a6","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"89c707ed-9841-4e53-96fb-940cc3214804","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"64e2f4a3-2303-4bfa-8a93-6c23ef01de58","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"aa71a884-c5bc-4842-8d6a-873dfd645167","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"2605431b-dc80-491d-886e-28981595d277","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"69e79655-e015-4f9a-a230-2a25c988c926","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a570c8e7-07a2-47da-965b-da44fd1fa5cf","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"86662220-9b9e-4940-9ced-d22642ea49a8","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"24769ecd-2b08-4a85-b318-4f533bbf8393","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a244ead7-a2c6-47a3-ac17-c5dbfa337362","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"04e73782-aa78-4dfe-a4f9-e72ed4c78a11","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4f41e22e-eb51-49e5-aeae-a42dd6bf352c","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"790bc77a-9216-48fd-b8f9-fbc374ebb155","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"21c6131f-0f2d-41d1-9284-6ad9ee803c1f","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"7ded3a22-15eb-49b8-a488-e83c2cd872eb","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"33638a1c-7196-42c1-a96d-38b2d9ba8ac4","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4a0842a3-20b1-40c3-8e00-cd5941ffdf53","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"6e6ac5b1-1501-4e28-89cc-525139488537","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"b0576ca2-cb84-4390-9f95-9354ec20eda5","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"55fd3bb8-18d4-4edb-9640-ca3a365b798f","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"dacc7931-6785-4675-be31-80930403cf7b","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"63c577e6-6cf9-497e-94e1-2307f7d3f498","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"1b88a165-2563-437e-99bb-ae30bd4b56db","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"adf3817f-7667-4a4c-8a5f-767b0b7e1e3e","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"3a083583-1d5f-492b-b450-34b2b5c775b8","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"5d37413b-3600-4da9-9700-feea54355f59","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a5a73576-16ea-4cbc-925c-ef547389eaa5","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"1126cfab-6210-4e28-bee0-02c113fb7a0c","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"09a66339-64c0-415c-b142-0691587a8e4a","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"0baaf91d-84f6-404c-a487-735226b6d5b6","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"5b7aeac5-c755-426a-95c7-1ae8e547179a","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"57c94653-8893-403b-a5b1-0d1e33a0bd0f","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]}]
我们在之前的FAQ中讲到了单元格中使用区域模板,同理在表格绑定中也能使用区域模板。
区域模板实际上就是一个特殊的 CellType
由于表格绑定目前还不支持列设置 CellType
,我们需要在表格绑定后,通过代码给指定区域设置 celltype
在下面示例中,给表格第一行设置了CellType
,然后使用 copyTableStyle
方法将内容复制到表格其他行,样式和公式都可以复制。
表格绑定的数据也无法使用sheet绑定中的value方法返回。需要在构建数据源时,数组中设置 RangeTemplate
的属性,就是一个对象
重新构建数据:
{
list: [
{
detail: data[0],
},
{
detail: data[1],
},
{
detail: data[2],
},
];
}//可以循环构建
核心代码:
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({
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);
// 设定style
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++) {
// 复制样式
sheet.copyTo(
range.row + i - 1,
range.col,
range.row + i,
range.col,
1,
range.colCount,
GC.Spread.Sheets.CopyToOptions.style
);
// 复制公式
sheet.copyTo(
range.row + i - 1,
range.col,
range.row + i,
range.col,
1,
range.colCount,
GC.Spread.Sheets.CopyToOptions.formula
);
// 复制单元格合并
sheet.copyTo(
range.row + i - 1,
range.col,
range.row + i,
range.col,
1,
range.colCount,
GC.Spread.Sheets.CopyToOptions.span
);
// 设置行高
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);
}
});
// 初始化子Spread
function initDialogSpread() {
if (!dialogSS) {
dialogSS = new GC.Spread.Sheets.Workbook(
document.getElementById("dialogSS")
);
}
dialogSS.options.tabStripVisible = false;
dialogSS.refresh();
}
function editRangeCell(sheet, row, col) {
setTimeout(function () {
initDialogSpread();
setEditorValue(sheet, row, col);
}, 10);
editorDialog.style.display = "block";
}
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 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>
完整版Demo可以参考论坛精华贴:在表格绑定中使用区域模板(Range Template)
作者: Dexter.Yao | 审核:AlexZ | 更新时间:2023.09.24