XForms/类似电子表格的更新
外观
< XForms
(从 XForms/Spreadsheet like updating 重定向)许多传统的基于 JavaScript 的表单开发人员不习惯于变量自动更新。使用 XForms,您可以轻松创建复杂的系统,其中 XForms 自动确定要更新的单元格。这类似于使用电子表格。会自动为您创建依赖关系图,如果某个单元格依赖的输入发生变化,则会自动更新相应的单元格。
以下是一个演示此功能的示例程序。
以下是应用程序的屏幕截图
请注意,顶部的网格实际上只是未标记的输入单元格。在网格下方是表格中的示例输出。您应该能够更改任何输入单元格,输入 Tab 键,并看到输出和页脚计算发生变化。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xs="http://www.w3.org/2001/XMLSchema">
<head>
<title>XForms Spreadsheat like Update</title>
<style type="text/css">
table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
}
th {
color: white;
background-color: black;
}
.output tr td {
border: solid black 1px;
padding: 2px;
text-align: center;
}
</style>
<xf:model>
<xf:instance>
<Spreadsheet xmlns="">
<Row>
<A>10</A>
<B>20</B>
<C>30</C>
</Row>
<Row>
<A>40</A>
<B>50</B>
<C>60</C>
</Row>
<Row>
<A>70</A>
<B>80</B>
<C>90</C>
</Row>
<Results>
<sum/>
<avg/>
<min/>
</Results>
</Spreadsheet>
</xf:instance>
<xf:bind nodeset="/Spreadsheet/Results/sum" calculate="sum(/Spreadsheet/Row/A)" type="xs:decimal" />
<xf:bind nodeset="/Spreadsheet/Results/avg" calculate="avg(/Spreadsheet/Row/B)" type="xs:decimal" />
<xf:bind nodeset="/Spreadsheet/Results/min" calculate="min(/Spreadsheet/Row/C)" type="xs:decimal" />
</xf:model>
</head>
<body>
<xf:group ref="/Spreadsheet">
<xf:input ref="Row[1]/A">
<xf:label></xf:label>
</xf:input>
<xf:input ref="Row[1]/B">
<xf:label></xf:label>
</xf:input>
<xf:input ref="Row[1]/C">
<xf:label></xf:label>
</xf:input>
<br/>
<xf:input ref="Row[2]/A">
<xf:label></xf:label>
</xf:input>
<xf:input ref="Row[2]/B">
<xf:label></xf:label>
</xf:input>
<xf:input ref="Row[2]/C">
<xf:label></xf:label>
</xf:input>
<br/>
<xf:input ref="Row[3]/A">
<xf:label></xf:label>
</xf:input>
<xf:input ref="Row[3]/B">
<xf:label></xf:label>
</xf:input>
<xf:input ref="Row[3]/C">
<xf:label></xf:label>
</xf:input>
<table class="output">
<thead>
<tr>
<th>#</th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<xf:output value="1" />
</td>
<td>
<xf:output ref="Row[1]/A" />
</td>
<td>
<xf:output ref="Row[1]/B" />
</td>
<td>
<xf:output ref="Row[1]/C" />
</td>
</tr>
<tr>
<td>
<xf:output value="2" />
</td>
<td>
<xf:output ref="Row[2]/A" />
</td>
<td>
<xf:output ref="Row[2]/B" />
</td>
<td>
<xf:output ref="Row[2]/C" />
</td>
</tr>
<tr>
<td>
<xf:output value="3" />
</td>
<td>
<xf:output ref="Row[3]/A" />
</td>
<td>
<xf:output ref="Row[3]/B" />
</td>
<td>
<xf:output ref="Row[3]/C" />
</td>
</tr>
<tr>
<td />
<td>Sum=<xf:output ref="Results/sum" />
</td>
<td>Avg=<xf:output ref="Results/avg" />
</td>
<td>Min=<xf:output ref="Results/min" />
</td>
</tr>
</tbody>
</table>
</xf:group>
</body>
</html>
由于某些 XForms 实现的限制,此示例未使用“repeat”命令,而是直接通过其地址访问每个单元格。
如果我们在表格中使用 repeat-nodeset 语句,此示例可以更简单。目前这在使用 FormFaces 的输入单元格中不起作用。