XForms/全選
外觀
< XForms
您希望能夠使用單個觸發器選擇表格中的所有行。
您可以將專案列表放在表格中,並在其中設定一列包含複選框。然後,您可以使用索引函式更改所選專案。

<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<head>
<title>Select all, Unselect all</title>
<style type="text/css">
table {width:300px}
td,td {text-align: center; width:25%}
</style>
<xf:model>
<xf:instance xmlns="">
<data>
<item id="1" selected="false">
<title>red</title>
</item>
<item id="2" selected="false">
<title>orange</title>
</item>
<item id="3" selected="false">
<title>yellow</title>
</item>
<item id="4" selected="false">
<title>blue</title>
</item>
</data>
</xf:instance>
<xf:bind nodeset="item/@selected" type="xs:boolean" />
</xf:model>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>position()</th>
<th>index()</th>
<th>color</th>
<th>select</th>
</tr>
</thead>
</table>
<!-- one table per row :-( -->
<xf:repeat nodeset="item" id="repeat-id">
<table>
<tr>
<td>
<xf:output value="position()" />
</td>
<td>
<xf:output value="index('repeat-id')" />
</td>
<td>
<xf:output ref="title" />
</td>
<td>
<xf:input ref="@selected" />
</td>
</tr>
</table>
</xf:repeat>
<xf:trigger>
<xf:label>Select all list [n]</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="item[1]/@selected" value="'true'" />
<xf:setvalue ref="item[2]/@selected" value="'true'" />
<xf:setvalue ref="item[3]/@selected" value="'true'" />
<xf:setvalue ref="item[4]/@selected" value="'true'" />
</xf:action>
</xf:trigger>
<xf:trigger>
<xf:label>Unselect all list [n]</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="item[1]/@selected" value="'false'" />
<xf:setvalue ref="item[2]/@selected" value="'false'" />
<xf:setvalue ref="item[3]/@selected" value="'false'" />
<xf:setvalue ref="item[4]/@selected" value="'false'" />
</xf:action>
</xf:trigger>
<br />
<xf:trigger>
<xf:label>Select all repeat</xf:label>
<xf:action ev:event="DOMActivate">
<xf:repeat nodeset="item" id="repeat-id-2">
<xf:setvalue ref="@selected" value="'true'" />
</xf:repeat>
</xf:action>
</xf:trigger>
<xf:trigger>
<xf:label>Unselect repeat</xf:label>
<xf:action ev:event="DOMActivate">
<xf:repeat nodeset="item" id="repeat-id-3">
<xf:setvalue ref="@selected" value="'false'" />
</xf:repeat>
</xf:action>
</xf:trigger>
<ol>
<xf:repeat nodeset="item" id="repeat-id-4">
<li>
<xf:output ref="@selected" />
</li>
</xf:repeat>
</ol>
</body>
</html>
請注意,重複塊內的 setvalues 無法正常工作。我嘗試過在重複塊內使用 current() 函式,如下所示:
<xf:repeat>
<xf:setvalue ref="current()/@selected" value="'false'" />
</xf:repeat>
但是沒有成功。
如果有人知道如何讓它工作,請告訴我們。謝謝 - Dan
注意:<xf:repeat> 無法在 <xf:action> 內使用。以下是對這種情況的解決方法。
<xf:instance id="count">
<count/>
</xf:instance>
<xf:bind nodeset="instance('count')" type="xs:integer" />
<xf:trigger>
<xf:label>Select all repeat</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="instance('count')" value="0" />
<xf:action while="instance('count') < count(item)">
<xf:setvalue ref="instance('count')" value="instance('count') + 1" />
<xf:setvalue ref="item[number(instance('count'))]/@selected" value="'true'" />
</xf:action>
</xf:action>
</xf:trigger>