09 - Lista con colonne bloccate

Utilizzo

Questa struttura permette di ottenere una lista (di soli campi read-only con larghezza fissa) divisa in due parti: 

• • la parte sinistra composta da colonne bloccate e sempre visibili

  • la parte destra composta da colonne scorrevoli

Le intestazioni della lista rimarranno sempre visibili.

Codice LANSA di esempio

DEF_LIST NAME(£LSTWAMNAM) FIELDS(£ARTIC £DESC £ORD £RIG £CART £DIST £BUONO) TYPE(*WORKING) ENTRYS(*MAX)

WEB_MAP FOR(*BOTH) FIELDS(£LSTWAMNAM)

Codice XSL di esempio

<!-- CHIAMATA ALLA TEMPLATE DELLA LISTA -->

<xsl:call-template name="TemplateFixedList" />

<!-- TEMPLATE LISTA -->

<xsl:template name="TemplateFixedList">   

   <div class="edDivFixedListContainer">

      <div class="edDivFixedListContainerInner">

         <div class="edDivFixedList" data-listname="LSTWAMNAM" data-celltitle="true"

              data-bodyhover="true" data-headerclick="true"

              data-bodyclick="true">

            <!-- INTESTAZIONE PARTE FISSA -->

            <div class="leftHeader">

               <div class="leftHeaderInner">

                  <div class="headerCell" data-width="180">

                     <xsl:value-of select="key('variable', 'MTXTEDARTICOLO')" />

                  </div>

                  <div class="headerCell" data-width="260">

                     <xsl:value-of select="key('variable', 'MTXTEDDESCRIZIONE')" />

                  </div>

               </div>

            </div>

            <!-- INTESTAZIONE PARTE SCROLL -->

            <div class="rightHeader">

               <div class="rightHeaderInner">

                  <div class="headerCell" data-width="80">

                     <xsl:value-of select="key('variable', 'MTXTEDORDINE')" />

                  </div>

                  <div class="headerCell" data-width="40">

                     <xsl:value-of select="key('variable', 'MTXTEDRIGA')" />

                  </div>             

                  <div class="headerCell" data-width="80">

                     <xsl:value-of select="key('variable', 'MTXTEDCARTELLINO')" />

                  </div>

                  <div class="headerCell" data-width="40">

                     <xsl:value-of select="key('variable', 'MTXTEDDISTINTA')" />

                  </div>              

                  <div class="headerCell" data-width="80">

                     <xsl:value-of select="key('variable', 'MTXTEDBUONO')" />

                  </div>

               </div>

            </div>

            <!-- BODY PARTE FISSA -->

            <div class="leftBody">

               <div class="leftBodyInner">

                  <xsl:for-each select="/lxml:data/lxml:lists/lxml:list[@name='LSTWAMNAM']/lxml:list-entries/lxml:entry">

                     <xsl:variable name="ARTIC" select="lxml:column[1]" />

                     <xsl:variable name="DESC" select="lxml:column[2]" />

                     <div class="leftBodyRow">

                        <div class="bodyCell">

                           <xsl:value-of select="$ARTIC" />

                        </div>

                        <div class="bodyCell">

                           <xsl:value-of select="$DESC" />

                        </div>

                     </div>

                     <span class="edHidden">

                     <!-- INSERIRE QUI EVENTUALI CAMPI HIDDEN DI CUI SI HA BISOGNO -->   

                     </span>

                  </xsl:for-each>

               </div>

            </div>

            <!-- BODY PARTE SCROLL -->

            <div class="rightBody">

               <div class="rightBodyInner">

                  <xsl:for-each select="/lxml:data/lxml:lists/lxml:list[@name='LSTWAMNAM']/lxml:list-entries/lxml:entry">

                     <xsl:variable name="ORD" select="lxml:column[3]" />

                     <xsl:variable name="RIG" select="lxml:column[4]" />

                     <xsl:variable name="CART" select="lxml:column[5]" />

                     <xsl:variable name="DIST" select="lxml:column[6]" />

                     <xsl:variable name="BUONO" select="lxml:column[7]" />

                     <div class="rightBodyRow">

                        <div class="bodyCell">

                           <xsl:value-of select="$ORD" />

                        </div>

                        <div class="bodyCell">

                           <xsl:value-of select="$RIG" />

                        </div>                     

                        <div class="bodyCell">

                           <xsl:value-of select="$CART" />

                        </div>

                        <div class="bodyCell">

                           <xsl:value-of select="$DIST" />

                        </div>                    

                        <div class="bodyCell">

                           <xsl:value-of select="$BUONO" />

                        </div>

                     </div>

                  </xsl:for-each>

               </div>

            </div>

         </div>     

      </div>

   </div>

</xsl:template>

Regole principali

• • impostare gli attributi dell'elemento <div> con classe edDivFixedList nel seguente modo:     

  • data-listname: nome della lista

  • data-celltitle: impostare a true se si vuole visualizzare un hint automatico per tutte le celle della lista con il relativo contenuto

  • data-bodyhover: impostare a true se si vuole evidenziare ogni riga al passaggio del mouse

  • data-headerclick: impostare a true per visualizzare il cursore di click abilitato nelle celle di intestazione

  • data-bodyclick: impostare a true per visualizzare il cursore di click abilitato nelle celle del corpo della lista

• per ogni elemento <div> con classe headerCell deve essere presente il relativo elemento <div> con classe bodyCell (non è possibile riprodurre il colspan delle tabelle classiche)

  • la larghezza di ogni colonna deve essere fissa e va impostata tramite l'attributo data-width in ogni elemento <div> con classe headerCell

Note

• • Tutti i contenuti delle celle che superano la relativa dimensione impostata verranno troncati (con dei puntini alla fine). Se viene abilitato il parametro data-celltitle l'intero contenuto potrà essere visibile nell'hint della cella