Question

我会尝试使用Orbeon做一些时髦的事情并生成XForms。我想将select1的项目显示在表格的不同列中。我不能在这里使用xf：repeat，因为它应该在select1中重复。

为了说明，让我们想象一下，我想问几辆最好的车。我希望以表格的方式显示这些问题，每个问题都是TR中的汽车和td中的每个颜色项目。
在这里，我会在一个肮脏的完美世界中做些什么：

<xhtml:table>
      <xf:repeat nodeset="/cars">            
         <xhtml:tr>
           <xhtml:td><xf:output ref="car/name"/><xh:td/>
           <xf:select1>
                <xhtml:td><xf:item>Blue</xf:item></xhtml:td>
                <xhtml:td><xf:item>Green</xf:item></xhtml:td>
                <xhtml:td><xf:item>Yellow</xf:item></xhtml:td>
                <xhtml:td><xf:item>Red</xf:item></xhtml:td>
           </xf:select1>
         </xhtml:tr>         
      </xf:repeat>      
</xhtml:table>

但这不起作用，因为我不能在xf：select1中使用xf：repeat。我不能只使用css，因为我想生成Xforms并且css将取决于行数和列数（假设汽车和颜色的数量可能会改变）...所以我也应该生成css（也许它是正确的方式...）... 任何人都不知道吗？

Answer 1

使用纯粹的可移植XForms我没有看到任何其他解决方案，除了使用一个实例，其中每个选项都存在于自己的节点中，例如：

<xf:instance id="cars">
<cars xmlns="">
    <car>
        <name>Car 1</name>
        <is-blue></is-blue>
        <is-green></is-green>
        <is-yellow></is-yellow>
        <is-red></is-red>
    </car>
    <car>
        <name>Car 2</name>
        <is-blue></is-blue>
        <is-green></is-green>
        <is-yellow></is-yellow>
        <is-red></is-red>
    </car>
   .../...
</cars>

然后，您可以在每个<xf:select1>中使用<td>：

<xf:repeat nodeset="car">
<tr>
    <td><xf:output ref="name"></xf:output></td>
    <td>
        <xf:select1 ref="is-blue" appearance="full">
            <xf:label></xf:label>
            <xf:item>
                <xf:label>Blue</xf:label>
                <xf:value>yes</xf:value>
            </xf:item>
        </xf:select1>
    </td>
    <td>
        <xf:select1 ref="is-green" appearance="full">
            <xf:label></xf:label>
            <xf:item>
                <xf:label>Green</xf:label>
                <xf:value>yes</xf:value>
            </xf:item>
        </xf:select1>
    </td>...

当然，您需要添加操作以在选择其他选项时取消选择其他选项。如果您想保留原始实例，则必须为这些控件使用辅助实例，并编写动作以同步这两个实例。

我不会说写这会很有趣，但我毫不怀疑这可以做到。

现在，如果您不害怕使用实现特定技巧，您可以将您喜欢的实现生成的HTML设置样式（在这种情况下为Orbeon），以显示为表格。

为此，您需要编写控件，查看生成的内容以及如何依赖此标记来获取您尝试实现的演示文稿。

例如，如果您的控件是：

<xf:repeat nodeset="car">
<div class="table">
    <xf:select1 ref="color" appearance="full">
        <xf:label ref="../name"></xf:label>
        <xf:item>
            <xf:label>Blue</xf:label>
            <xf:value>blue</xf:value>
        </xf:item>
        <xf:item>
            <xf:label>Green</xf:label>
            <xf:value>green</xf:value>
        </xf:item>
        <xf:item>
            <xf:label>Yellow</xf:label>
            <xf:value>yellow</xf:value>
        </xf:item>
        <xf:item>
            <xf:label>Red</xf:label>
            <xf:value>red</xf:value>
        </xf:item>
    </xf:select1>
</div>

以下CSS规则可以解决这个问题：

<style type="text/css">
.table{
    display:table;
}

.table .xforms-select1{
    display:table-row;
}

.table .xforms-select1 *{
    display:table-cell;
}</style>

以“表格方式”显示xf：xf：select1的项目

1 个答案: