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 贡献。