コンボボックスで選択したキーワードで検索

コンボボックスでキーワードを選択すると、ビューの先頭列と一致するものだけを表示する、という画面の作り方を説明する。

コンボボックスの選択をビューに反映

以下の仕組みを使っている。

基本的な考え方

コンボボックスの選択肢はビュー形式のデータソースに紐付けておくと、簡単にビューに表示される文字列を選択肢に出すことができる。

選択イベントのハンドラを定義しておけば、選択結果をrequestScopeというグローバル領域に格納する。さらに、 今回はページ全体を書き換えるのではなく、ビューだけを部分更新する指示を出す。

ビューコントロールは更新を指示されると、データソースを検索するときにrequestScopeから検索キーワードを持ってきて絞込みを行う。 そのデータソースを元にしてビューを表示すればおしまい。

具体的なコード

こんな感じのコードになる。

  01:  <xp:this.data>
  02:    <xp:dominoView var="管理部署別" viewName="管理部署別" keys="#{javascript:requestScope.locationfilter}" />
  03:  </xp:this.data>
  04:  <xp:comboBox id="comboBoxViewFilterText1" value="#{requestScope.locationfilter}">
  05:    <xp:selectItem itemLabel="No Filtering" itemValue="" />
  06:    <xp:selectItems>
  07:      <xp:this.value><![CDATA[#{javascript:@Unique(@DbColumn(@DbName(),"管理部署別",1))}]]></xp:this.value>
  08:    </xp:selectItems>
  09:    <xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="viewPanel1" />
  10:  </xp:comboBox>
  11:  
  12:  <xp:viewPanel rows="30" id="viewPanel1" value="#{管理部署別}">
  13:    <xp:this.facets>
  14:      <xp:pager partialRefresh="true" layout="Previous Group Next" xp:key="headerPager" id="pager1" />
  15:    </xp:this.facets>
  16:    <xp:viewColumn columnName="管理部署" id="viewColumn1">
  17:      <xp:viewColumnHeader value="管理部署" id="viewColumnHeader1" />
  18:    </xp:viewColumn>
  19:    <xp:viewColumn columnName="管理者氏名" id="viewColumn2">
  20:      <xp:viewColumnHeader value="管理者氏名" id="viewColumnHeader2" />
  21:    </xp:viewColumn>
  22:    <xp:viewColumn columnName="管理番号" id="viewColumn3">
  23:      <xp:viewColumnHeader value="管理番号" id="viewColumnHeader3" />
  24:    </xp:viewColumn>
  25:    <xp:viewColumn columnName="ホスト名" id="viewColumn4">
  26:      <xp:viewColumnHeader value="ホスト名" id="viewColumnHeader4" />
  27:    </xp:viewColumn>
  28:    <xp:viewColumn columnName="場所" id="viewColumn5">
  29:      <xp:viewColumnHeader value="場所" id="viewColumnHeader5" />
  30:    </xp:viewColumn>
  31:  </xp:viewPanel>
  

スゴイねぇ。めんどくさいコードを書かずに、Ajaxのようなこともできてしまうなんて。