項目の有効/無効の切り替え(表示/非表示)

<?xml version="1.0" encoding="UTF-8"?>
  <xp:view xmlns:xp="http://www.ibm.com/xsp/core">
 
    <xp:table>
      <xp:tr>
        <xp:td>
          <xp:radioGroup id="radioGroup1" defaultValue="1">
            <xp:selectItem itemLabel="法人" itemValue="1"></xp:selectItem>
            <xp:selectItem itemLabel="個人" itemValue="2"></xp:selectItem>
            <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="readCheck">
            </xp:eventHandler>
          </xp:radioGroup>
        </xp:td>
      </xp:tr>
    </xp:table>
    <xp:table id="readCheck">
      <xp:tr style="heigh:10px">
      	<xp:this.rendered><![CDATA[#{javascript:var val = getComponent("radioGroup1").getValue();
if(val == "1"){
  return true;
}
return false;}]]></xp:this.rendered>
      	<xp:td>会社名</xp:td>
      	<xp:td>:</xp:td>
      	<xp:td>
      		<xp:inputText id="inputText1">
      		</xp:inputText>
      	</xp:td>
      </xp:tr>
      <xp:tr>
        <xp:td>氏名</xp:td>
        <xp:td>:</xp:td>
        <xp:td>
          <xp:inputText id="inputText2"></xp:inputText>
        </xp:td>
      </xp:tr>
      <xp:tr>
        <xp:td>電話番号</xp:td>
        <xp:td>:</xp:td>
        <xp:td>
          <xp:inputText id="inputText3"></xp:inputText>
        </xp:td>
      </xp:tr>
 
    </xp:table>
  </xp:view>





ラジオボタンで選択肢を変更すると、その動作に合わせて特定の入力フォームが有効/無効(表示/非表示)となるコードです。

1.選択肢となるラジオボタングループを作成する

                    <xp:radioGroup id="radioGroup1" defaultValue="1">
                        <xp:selectItem itemLabel="法人" itemValue="1"></xp:selectItem>
                        <xp:selectItem itemLabel="個人" itemValue="2"></xp:selectItem>
                        <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="readCheck">
                        </xp:eventHandler>
                    </xp:radioGroup>

2.ラジオボタングループのonclickイベントのサーバーオプションを変更する。(サンプルコードは部分更新です)

3.入力フォームを作成する

4.選択肢が変更されることにより、有効/無効(表示/非表示)となる表の行のレンダリングに以下のコードを入力する(値の計算に入力)

var val = getComponent("radioGroup1").getValue();
if(val == "1"){
    return true;
}
return false;

 

※ポイント※

var val = getComponent("ラジオボックスグループの名前").getValue();

上記で変数valに選択されたラジオボックスグループの項目がセットされるようになります。

この際取得される値はitemLabelではなくitemValueとなるため、val == "1"という比較演算となります。


XPages
SR_kuroiwa
July 17, 2018 at 3:50 PM
Rating
0





No comments yetLogin first to comment...