Question

我整天都玩这个，但似乎无法按照我想要的方式工作：o（

我正在编写一个允许用户选择食堂菜单的应用程序。我想要一张这样漂亮的桌子：

各种菜单的选项保存在用户在上一个屏幕上选择的文档菜单上（列出一周） - 这将保存在数据源菜单中。

然后用户选择他/她想要的那一周 - 然后按保存，我需要在名为星期一（星期一），M1，M2或M3的字段中创建包含M1，M2或M3的选择文档该字段称为星期二（星期二）等。

现在无论我做了什么，我都无法将选项排成一行，因为我希望他们使用我所知道的XPages。我现在最终得到了下面的代码（只添加了星期一（Montag）行的代码，让你知道我在做什么。相同的代码基本上重复一周的每一天（将使用重复控件）我现在如何1）将我的XPages字段附加到变量（如您所见，我使用纯BootStrap）或在SSJS中找到所选选项的值，这样我就可以使用JS创建一个新文档了。？

非常感谢任何帮助。

                <!-- ======================== Montag ================================== -->
                <div class="row">
                    <div class="row">
                        <div class="col-md-2">
                            <xp:text escape="true" id="computedField1">Montag</xp:text>
                        </div>

                        <div class="col-md-3">
                            <label class="radio-inline">
                                <input type="radio" name="montag" id="Radios1" value="M1">
                                    <xp:text escape="true" id="computedField3">
                                        <xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_1");}]]></xp:this.value>
                                    </xp:text>
                                </input>
                            </label>
                        </div>
                        <div class="col-md-3">
                            <label class="radio-inline">
                                <input type="radio" name="montag" id="Radios2" value="M2">
                                    <xp:text escape="true" id="computedField4">
                                        <xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_2");}]]></xp:this.value>
                                    </xp:text>
                                </input>
                            </label>
                        </div>
                        <div class="col-md-3">
                            <label class="radio-inline">
                                <input type="radio" name="montag" id="Radios3" value="M3">
                                    <xp:text escape="true" id="computedField5">
                                        <xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_3");}]]></xp:this.value>
                                    </xp:text>
                                </input>
                            </label>
                        </div>
                    </div>
                </div>

Mark建议的改变：

这里是图片：

[ enter image description here ]

和代码：

                        <div class="col-md-3">
                            <label class="radio-inline">
                                <xp:radio id="Radios1" groupName="mon" value="#{wahl.mon}">
                                    <xp:text escape="true" id="computedField3">
                                        <xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_1");}]]></xp:this.value>
                                    </xp:text>
                                </xp:radio>
                            </label>
                        </div>
                        <div class="col-md-3">
                            <label class="radio-inline">
                                <xp:radio id="Radios2" groupName="mon" value="#{wahl.mon}">
                                    <xp:text escape="true" id="computedField4">
                                        <xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_2");}]]></xp:this.value>
                                    </xp:text>
                                </xp:radio>
                            </label>
                        </div>
                        <div class="col-md-3">
                            <label class="radio-inline">
                                <xp:radio id="Radios3" groupName="mon" value="#{wahl.mon}">
                                    <xp:text escape="true" id="computedField5">
                                        <xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_3");}]]></xp:this.value>
                                    </xp:text>
                                </xp:radio>
                            </label>
                        </div>

Answer 1

如果你设置这样的单选按钮，它们会根据specs进行渲染。请注意，我已为viewScope参数添加了绑定。

<div
class="col-md-3">

    <xp:radio
        text="option 1"
        disableTheme="true"
        styleClass="radio-inline"
        id="radio1"
        selectedValue="M1"
        groupName="montag"
        value="#{viewScope.montagSelected}">
    </xp:radio>

</div>

它生成以下HTML（我使用默认的'Bootstrap3'主题）：

<div class="col-md-3">
  <label 
    for="view:_id1:radio1"
    class="radio-inline">
      <input id="view:_id1:radio1" 
        type="radio" 
        name="view:_id1:montag" 
        value="M1" 
        onchangetrigger="early-onclick">
        option 1
  </label>
</div>

保存单选按钮选择

1 个答案: