いいね!数

1

閲覧数
714

複数値をバインドデータとした繰り返しコントロールを配置しています。

その中に複数値を表示しています。

ここで、繰り返しコントロール内の複数値を選択できるようにしています。

繰り返しコントロール内にチェックボックスを配置したり、ボタンを配置すれば一つ一つを選択するという事はできるのですが(下図参照)、

まとめて全部を選択したり、選択解除したりすることはできません。

 

 

繰り返しコントロールの中のソースはこんな感じです。

----------------------------------------------------------------

        <xp:repeat id="repeat1" rows="30" var="rowData" indexVar="rowIdx">
            <xp:this.value><![CDATA[#{javascript:document1.getItemValue( "multiValue" )}]]></xp:this.value>
            <xp:table style="border-top: solid 1px #D9D9D9;width:100.0%">
                <xp:tr>
                    <xp:td style="width:35.0px">
                        <xp:checkBox id="chkIDs" checkedValue="1"
                            uncheckedValue="0">
                            <xp:eventHandler event="onclick" submit="true"
                                refreshMode="partial" refreshId="tblResult" id="eventHandler1">
                                <xp:this.action><![CDATA[#{javascript:var chk1 = getComponent( "cfMultiValue" ).getValue();
if ( getComponent( "chkIDs" ).getValue() == 1 ) {
    if ( sessionScope.selectedIds == null ) {
        var tmpVector:java.util.Vector = new java.util.Vector();
        tmpVector.add( chk1 );
        sessionScope.selectedIds = tmpVector;
    } else {
        sessionScope.selectedIds.add( chk1 );
    }
} else {
    sessionScope.selectedIds.remove( chk1 );
}}]]></xp:this.action>
                            </xp:eventHandler>
                        </xp:checkBox>
                    </xp:td>
                    <xp:td style="width:35.0px">
                        <xp:text escape="true" id="cfNo" value="#{javascript:rowIdx+1}">
                            <xp:this.converter>
                                <xp:convertNumber type="number" integerOnly="true">
                                </xp:convertNumber>
                            </xp:this.converter>
                        </xp:text>
                    </xp:td>
                    <xp:td>
                        <xp:text escape="true" id="cfMultiValue" value="#{javascript:rowData}">
                        </xp:text>
                    </xp:td>
                </xp:tr>
            </xp:table>
        </xp:repeat>

----------------------------------------------------------------

繰り返しコントロールの外から操作できないかと試行錯誤したのですが、出来なさそうです(繰り返しコントロールのコレクション名や索引名は利用できない)。

まとめて選択したり、選択解除したりするのに何か方法はありますか?

 

サーバー情報: | クライアント情報: | 
カテゴリ:アプリ開発 - XPages | タグ:
  | 質問日時:2015/08/28 17:06:41

回答・コメント

いいね!数

2

こんにちは。

<xp:repeat>の中のコントロールにちょっかいを出すのが無理なら、<xp:checkBox>のデータ格納先を操作するというのはどうでしょうか?

 

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
    <xp:this.afterPageLoad><![CDATA[#{javascript:
      sessionScope.valueList = [
        ["0", "12345678"],
        ["0", "abcdefg"],
        ["0", "あいうえお"]
      ]
    }]]></xp:this.afterPageLoad>
    <xp:repeat id="repeat1" rows="30" var="rowData" indexVar="rowIdx">
        <xp:this.value><![CDATA[#{javascript:sessionScope.valueList}]]></xp:this.value>
        <xp:table style="border-top: solid 1px #D9D9D9;width:100.0%">
            <xp:tr>
                <xp:td style="width:35.0px">
                    <xp:checkBox id="chkIDs" checkedValue="1"
                        uncheckedValue="0" value="#{sessionScope.valueList[rowIdx][0]}">
                    </xp:checkBox>
                </xp:td>
                <xp:td style="width:35.0px">
                    <xp:text escape="true" id="cfNo" value="#{javascript:rowIdx+1}">
                        <xp:this.converter>
                            <xp:convertNumber type="number" integerOnly="true">
                            </xp:convertNumber>
                        </xp:this.converter>
                    </xp:text>
                </xp:td>
                <xp:td>
                    <xp:text escape="true" id="cfMultiValue" value="#{sessionScope.valueList[rowIdx][1]}">
                    </xp:text>
                </xp:td>
            </xp:tr>
        </xp:table>
    </xp:repeat>
    <xp:button value="全選択" id="button1">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="partial" refreshId="repeat1">
            <xp:this.action><![CDATA[#{javascript:
              for(var index=0; index < sessionScope.valueList.length; index++) {
                // java.util.vectorだとvalueList[index][0] = setvalがダメなのでset()を使う
                sessionScope.valueList[index].set(0, "1");
              }
            }]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
    <xp:button value="全解除" id="button2">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="partial" refreshId="repeat1">
            <xp:this.action><![CDATA[#{javascript:
              for(var index=0; index < sessionScope.valueList.length; index++) {
                sessionScope.valueList[index].set(0, "0");
              }
            }]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
</xp:view>

 

回答日時:2015/08/29 23:08:24

いいね!数

2

yac4423さん、ありがとうございます。

checkBoxの格納先をsessionScopeの配列にするというのは考え付きませんでした。

おかげさまでうまくできるようになりました。

なお、複数値は文書に格納してあるので、文書から取得してくるような形に修正してみました。

こんな感じです。他の方の参考になれば幸いです。

 

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" pageTitle="複数値の繰り返しコントロールのテスト">
    <xp:this.data>
        <xp:dominoDocument var="document1" formName="multiValue"></xp:dominoDocument>
    </xp:this.data>
    <xp:this.afterPageLoad><![CDATA[#{javascript:var itemvalues:java.util.Vector = document1.getItemValue( "multiValue" );
var iterator = itemvalues.iterator();
var tmpArray = [];
var i = 0;
while ( iterator.hasNext() ) {
    var itemvalue = iterator.next();
    tmpArray[i] = "0";
    i++;
}
sessionScope.selectedIds = tmpArray;}]]></xp:this.afterPageLoad>
    <xp:panel id="pnlView">
        <xp:table style="width:100.0%">
            <xp:tr>
                <xp:td style="width:35.0px">
                    <xp:checkBox id="checkBox1" checkedValue="1" uncheckedValue="0">
                        <xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="pnlView">
                            <xp:this.action><![CDATA[#{javascript:var chk1 = getComponent( "checkBox1" ).getValue();
if ( chk1 == "0" ) {
    for( var i=0;i<sessionScope.selectedIds.length;i++ ) {
        sessionScope.selectedIds.set( i, "0" );
    }
} else {
    for( var i=0;i<sessionScope.selectedIds.length;i++ ) {
        sessionScope.selectedIds.set( i, "1" );
    }
}}]]></xp:this.action>
                        </xp:eventHandler>
                    </xp:checkBox>
                </xp:td>
                <xp:td style="width:35px">
                    <xp:label value="No." id="label2" style="font-weight:bold"></xp:label>
                </xp:td>
                <xp:td>
                    <xp:label value="複数値" id="label1" style="font-weight:bold"></xp:label>
                </xp:td>
            </xp:tr>
        </xp:table>
        <xp:repeat id="repeat1" rows="30" var="rowData" indexVar="rowIdx">
            <xp:this.value><![CDATA[#{javascript:document1.getItemValue( "multiValue" )}]]></xp:this.value>
            <xp:table style="width:100.0%">
                <xp:tr>
                    <xp:td style="width:35.0px">
                        <xp:checkBox id="chkIDs" checkedValue="1" uncheckedValue="0">
                            <xp:this.value><![CDATA[#{sessionScope.selectedIds[rowIdx]}]]></xp:this.value>
                            <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="computedField2" id="eventHandler1">
                            </xp:eventHandler>
                        </xp:checkBox>
                    </xp:td>
                    <xp:td style="width:35.0px">
                        <xp:text escape="true" id="cfNo" value="#{javascript:rowIdx+1}">
                            <xp:this.converter>
                                <xp:convertNumber type="number" integerOnly="true"></xp:convertNumber>
                            </xp:this.converter>
                        </xp:text>
                    </xp:td>
                    <xp:td>
                        <xp:text escape="true" id="cfMultiValue" value="#{javascript:rowData}"></xp:text>
                    </xp:td>
                </xp:tr>
            </xp:table>
        </xp:repeat>
        <xp:text escape="true" id="computedField2" value="#{javascript:sessionScope.selectedIds}"></xp:text>
    </xp:panel>
</xp:view>

 

 

回答日時:2015/08/31 10:32:00