Page tree
Skip to end of metadata
Go to start of metadata

你可以在数据绑定中使用 Spread.Sheets 设计器模版。

使用设计器模板来生成代码可以提高编码的效率。

设计器中 Data 标签页的 Template 选项用来设计单元格绑定模板的。

使用 template 来创建一个字段节点来对饮数据中的字段。

你也可以给字段设置 cell type(位于 Home → CellType 选项)。

使用 AutoGenerateLabel 来自动填入 path label。

点击绿色加号按钮来创建一个字段节点。然后输入字段名称(比如,name)。

点击最右侧的按钮可以设置字段选项。

下图展示了如何给数据添加一个节点。

下图为工具栏中 Template 按钮所在的位置

将节点拖动到单元格区域中即可生成表格布局。

你也可以使用 CellType 来改变单元格的设置。


如果以后还要编辑该模板,请保存为 Spread.Sheets Designer。

如果想将该模板应用到控件上,请保存为 JavaScript 文件。

对象将会被存为一个变量,变量名和文件名是一样的。

使用 Export 选项来存为 SSJSON 或者 JavaScript 文件。

如下图:

示例代码

以下代码使用了 binding.js 来为 Spread.Sheets 添加数据绑定:

HTML
<!DOCTYPE html>
<html>
<head>
<title>Spread.Sheets Binding</title>
<link type="text/css" href="./css/gc.spread.sheets.10.x.x.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.0.2.js" type="text/javascript"></script>
<script type="text/javascript" src="./scripts/gc.spread.sheets.all.10.x.x.min.js"></script>
<script type="text/javascript" src="binding.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
var data = { name: "bob", age: 20, gender: "Male", email: "bob@test.com",
married: true }; // customer's data source.
spread.fromJSON(binding); //Use fromJSON method to load the template, here template variable field is defined in binding.js.
var sheet = spread.getActiveSheet();
sheet.setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource(data)); //setDataSource with CellBindingSource.
});
</script>
</head>
<body>
<div id="ss" style="width: 600px; height: 250px; border: 1px solid gray">
</div>
</body>
</html>

以上代码跑起来之后应该如下图所示:

  • No labels