viewPanelHelper - ビューの中で文書の選択状態を保持する

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
 
  <xp:viewPanel id="viewPanel1">
    <xp:this.facets>
      <xp:pager partialRefresh="true" layout="Previous Group Next"
        xp:key="footerPager" id="pager1">
      </xp:pager>
      <xp:scriptBlock id="scriptBlockViewPanel" xp:key="south">
        <xp:this.value>
          <![CDATA[
            dojo.addOnLoad( function(){
              dojo.query(".xspCheckBoxViewColumn").connect('onclick', function() {
                  viewPanelHelper.addDoc( this.id, this.checked, this.value ); 
                  viewPanelHelper.updateDataField('#{id:viewPanelSelectedIds}');
              });
              viewPanelHelper.rebuildDocSelection();   
              viewPanelHelper.updateDataField('#{id:viewPanelSelectedIds}');
            });
          ]]></xp:this.value>
      </xp:scriptBlock>
      <xp:inputHidden id="viewPanelSelectedIds" xp:key="southEast" />
    </xp:this.facets>
    <xp:this.data>
      <xp:dominoView var="view1" viewName="All"></xp:dominoView>
    </xp:this.data>
    <xp:viewColumn columnName="DocUNID" id="viewColumn1" showCheckbox="true">
      <xp:viewColumnHeader value="DocUNIDs" id="viewColumnHeader1" />
    </xp:viewColumn>
  </xp:viewPanel>
     
  <xp:scriptBlock id="scriptBlockViewPanelHelper">
    <xp:this.value>
      <![CDATA[     
      /**
       * viewPanelHelper
       *
       * keeps selection of a view panel
       * stores data in hidden input field
       * @author Sven Hasselbach
       * @category CSJS
       * @category Helper
       * @version 1.3
       */
      viewPanelHelper = {
        selDocs: function(){ new Array() },
         
        addDoc: function( id, checked, noteId ){
          viewPanelHelper.selDocs[ noteId ] = { 'id': id, 'checked': checked , 'noteId': noteId }; 
        },
        rebuildDocSelection: function (){   
          dojo.query(".xspCheckBoxViewColumn").forEach(
              function( obj ){
                  if( viewPanelHelper.selDocs[obj.value] )
                    obj.checked = viewPanelHelper.selDocs[obj.value].checked;
              }
          )
    
        },
        getSelectedNoteIds: function(){
          var list = "";
          for( e in viewPanelHelper.selDocs ){
            if( viewPanelHelper.selDocs[e].checked === true ){
              if( list !== "" ) list +=",";
              list += viewPanelHelper.selDocs[e].noteId;
            }
          }
          return list
        },
        updateDataField: function(id){
          dojo.byId(id).value = viewPanelHelper.getSelectedNoteIds();
        }
         
      }
      ]]>
    </xp:this.value>
  </xp:scriptBlock>
 
  <xp:button value="Test" id="buttonTest">
    <xp:eventHandler event="onclick" submit="true"
      refreshMode="complete">
      <xp:this.action>
        <![CDATA[#{javascript:
          var value = getComponent("viewPanelSelectedIds").value;
          _dump( value )}]]>
      </xp:this.action>
    </xp:eventHandler>
  </xp:button>
   
</xp:view>





このコードはビューパネル内の選択文書の状態を保持するのに役立ちます。
ページ送りやカテゴライズしたビューでも動作します。
ビューを修正する必要はありません。ビューパネルのファセットに非表示フィールドをとこのスクリプトを追加するだけです。そして CSJS のクラス「viewPanelHelper」を XPage に追加します。(別の CSJS リソースファイルとして格納し一度だけロードしてあげます。)

選択文書はこの非表示フィールド「viewPanelSelectedIds」に保持されます。

このサンプルで使用されているビューは「DocUNID」という名の列があります。
このボタンを押すと選択文書にどのようにアクセスするかわかるようになっています。

ビューパネルの他のファセットを使用するにはこちらから参照できます: http://hasselba.ch/blog/?p=793

XPages
katoman
August 18, 2015 10:06 AM
Rating
0





No comments yetLogin first to comment...