xpages - コンボ ボックス コントロールを持つ optgroup

Question

<optgroup>select by native または ExtLib Combo box コントロール内でタグをレンダリングすることは可能ですか?

ネイティブ ソリューションを使用したいので、getComponent() またはバリデーターが機能します。それはjQuery/dojoでインラインhtmlを失格にすると思います。

Answer 1

私は私の質問に対するこの答えを見つけました。Domino Designerのコンボボックスの計算値は、通常は@DbLookupまたは@DbColumnの戻り値として文字列ベクトル/配列を返すことができます。実験中に、グループ（選択したアイテムから継承）を含む選択したアイテムのネイティブコンポーネントを返すことができることがわかりました。次のスニペットは、私が望んでいたものを構築します：アイテムのグループ化された階層。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:comboBox id="comboBox1" value="#{viewScope.combo}">
        <xp:selectItems>
            <xp:this.value><![CDATA[${javascript:var itms = new javax.faces.model.SelectItem[2];
var itm = null;
itm = new javax.faces.model.SelectItem();
itm.setLabel("label1");
itms[0] = itm;
itm = new javax.faces.model.SelectItem();
itm.setLabel("label2");
itms[1] = itm;

var g = new javax.faces.model.SelectItemGroup();
g.setLabel("Group");
g.setSelectItems(itms);
g
}]]></xp:this.value>
        </xp:selectItems>
    </xp:comboBox>
</xp:view>

サンプル：

この例に基づいて、多くのデータソースを組み合わせて<optgroup>、バッキングBeanやスコープ変数などの計算されたコンボを構築できます。

Answer 2

<optGroup>タグジェットのネイティブサポートはないようです。しかし、jQuery/dojo を不適格とするという仮定とは対照的に、これは解決策のように思えます。getComponent()、getValue()、setValue() などはまだ機能します。

必要なすべてに対して<optGroup>実行する必要があるのは、<xp:selectItem itemLabel="With your optGroup label" itemValue"optGroup1"></xp:selectItem>. 複数<optGroups>'sを使用する場合はitemValue、1 ずつ増やす必要があります。以下に例を貼り付けました。これが役立つことを願っています。

<xp:this.resources>
    <xp:script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" clientSide="true"></xp:script>
</xp:this.resources>
...
<xp:comboBox id="comboBox1" styleClass="optGroup">
    <xp:selectItem itemLabel="Swedish Cars" itemValue="optGroup1"></xp:selectItem>
    <xp:selectItem itemLabel="Volvo" itemValue="volvo"></xp:selectItem>
    <xp:selectItem itemLabel="Saab" itemValue="saab"></xp:selectItem>
    <xp:selectItem itemLabel="German Cars" itemValue="optGroup2"></xp:selectItem>
    <xp:selectItem itemLabel="Mercedes" itemValue="mercedes"></xp:selectItem>
    <xp:selectItem itemLabel="Audi" itemValue="audi"></xp:selectItem>
</xp:comboBox>

<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[
    //Iterate across the <option>'s for which the itemValues begin with "optGroup".
    $('.optGroup option[value^="optGroup"]').each(function(index, node) {
        //Use the actual itemValue ("optGroup1") to get all its siblings until the next
        //<option> is found with (again) an itemValue of "optGroup" (i.e. "optGroup2").
        $('.optGroup option[value="' + node.value + '"]').
            //No harm for last iteration: .nextAll() will be used if the selector is
            //not matched or is not supplied (in this example "optGroup3" won't get a match).
            nextUntil('.optGroup option[value="optGroup' + (index + 2) + '"]').
            //Wrap them in a <optGroup> tag and give it its label (itemLabel).
            wrapAll('<optGroup label="' + node.text + '"></optGroup>');
        //Remove the initial <option> since we no longer need it.
        $(this).remove();   
    });
    ]]></xp:this.value>
</xp:scriptBlock>

<xp:button value="Submit" id="button1">
    <xp:eventHandler event="onclick" submit="true"
        refreshMode="complete">
        <xp:this.action><![CDATA[#{javascript:
        print("Submitting: " + getComponent("comboBox1").getValue() );
        }]]></xp:this.action>
    </xp:eventHandler>
</xp:button>