XForms/佇列管理

動機

您想要管理一個專案佇列，並能夠在佇列中移動專案。示例操作包括向上移動、向下移動和移至頂部。

螢幕影像

向上箭頭會將選定的行向上移動一個專案。向下箭頭會將選定的專案向下移動一個專案。三角形會將選定的專案移至佇列的頂部。

佇列管理器的螢幕影像

工作示例連結

工作示例連結

示例程式碼

佇列管理器的示例模型

<xf:model>
    <xf:instance id="save-data" xmlns="">
        <queue>
           <item>
              <id>1</id>
              <title>Item One Title</title>
           </item>
           <item>
              <id>2</id>
              <title>Item Two Title</title>
           </item>
           <item>
              <id>3</id>
              <title>Item Three Title</title>
           </item>
           <item>
              <id>4</id>
              <title>Item Four Title</title>
           </item>
           <item>
              <id>5</id>
              <title>Item Five Title</title>
           </item>
        </queue>
    </xf:instance>
    
    <xf:instance xmlns="" id="views">
        <data>
            <delete-topic-trigger/>
            <tmp/>
        </data>
    </xf:instance>
    
    <xf:bind id="delete-topic-trigger" nodeset="instance('views')/delete-topic-trigger" 
        relevant="instance('save-data')/item[2]"/>
        
</xf:model>

示例 XForms 主體程式碼

<xf:repeat nodeset="instance('save-data')/item" id="id-repeat">
  <div class="row1">
     <span class="row">
          <xf:output ref="title" class="title"/>              
     </span>
     <xf:input ref="id" class="id"/> 
    
    <xf:trigger>
        <xf:label><img src="images/up.png" alt="Move Up" height="23" width="23"></img></xf:label>
        <xf:action ev:event="DOMActivate">
            <xf:setvalue ref="instance('views')/tmp" value="index('id-repeat')"/> 
            <xf:insert origin="instance('save-data')/item[index('id-repeat')]" 
                       nodeset="instance('save-data')/item" at="index('id-repeat')-1" position="before"/>
           <xf:delete nodeset="instance('save-data')/item[instance('views')/tmp +1]"/>  
        </xf:action>
    </xf:trigger>
    
    <xf:trigger>
        <xf:label><img src="images/down.png" alt="Move Down" height="23" width="23"></img></xf:label>
        <xf:action ev:event="DOMActivate">
             <xf:setvalue ref="instance('views')/tmp" value="index('id-repeat')"/> 
            <xf:insert origin="instance('save-data')/item[index('id-repeat')]" 
                       nodeset="instance('save-data')/item" at="index('id-repeat') +1"/>
            <xf:delete nodeset="instance('save-data')/item[instance('views')/tmp]"/>   
        </xf:action>
    </xf:trigger>
    
    <xf:trigger>
        <xf:label><img src="images/top.png" alt="Move to Top" height="23" width="23"></img></xf:label>
        <xf:action ev:event="DOMActivate">
            <xf:setvalue ref="instance('views')/tmp" value="index('id-repeat')"/>   
            <xf:insert origin="instance('save-data')/item[index('id-repeat')]" nodeset="instance('save-data')/item[1]" at="1" position="before"/>          
            <xf:delete nodeset="instance('save-data')/item[instance('views')/tmp + 1]"/> 
        </xf:action>
    </xf:trigger>
    
     <xf:trigger bind="delete-topic-trigger">
        <xf:label>Delete</xf:label>
        <xf:delete nodeset="instance('save-data')/item[index('id-repeat')]" ev:event="DOMActivate"/>
     </xf:trigger>  
   </div>  
</xf:repeat>

討論

此示例的關鍵是理解如何在使用不同的屬性的情況下使用插入和刪除操作。

將專案向上移動的觸發器需要將當前位置儲存到一個臨時專案中。

請注意，當前版本適用於突出顯示的行，而不是您在其中選擇按鈕的行。

鳴謝

此示例由 Ann Kelly 貢獻。