XForms/在列表之間移動專案

動機

您有兩個列表，您希望在列表之間移動選定的專案。這通常稱為列選擇器。

方法

使用者介面將有兩個列表，一個在右側，一個在左側。在列表之間，我們將看到兩個按鈕：向左移動和向右移動。使用者可以在左側列表中選中任意數量的專案，然後按“向右移動”按鈕將這些專案移動到右側列表。使用者也可以在右側列表中新增任意數量的專案，然後透過按下“向左移動”按鈕，這些專案將被移動到左側列表。

請注意，“移動”在技術上是兩個獨立的操作，一個是複製，另一個是刪除。但是使用者看不到這些獨立的步驟。

示例螢幕影像

在列表之間移動專案的螢幕影像

工作表單的連結

工作表單的連結

示例列表例項

  <left-list>
    <item>Item One</item>
    <item>Item Two</item>
    <item>Item Three</item>
    <item>Item Four</item>
    <item>Item Five</item>
  </left-list>
  <right-list>
    <item>Item Six</item>
    <item>Item Seven</item>
    <item>Item Eight</item>
    <item>Item Nine</item>
    <item>Item Ten</item>
  </right-list>

示例 XForms

以下表單有三個列。一個用於左側的專案列表，一個用於中間的移動按鈕列，一個用於右側的專案列表。

移動按鈕有兩個操作。

1. 透過將選定專案複製到另一列表中來在列表中插入新專案
2. 刪除選定專案

<div class="left span-3">
   <h3>Left</h3>
   <xf:repeat nodeset="instance('save-data')/left-list/item" id="left-repeat">
    <xf:output ref="."/>
   </xf:repeat>
   
   <xf:output value="index('left-repeat')">
    <xf:label>Left Index: </xf:label>
   </xf:output>
</div>


<div class="middle span-3">
   <xf:trigger>
     <xf:label>Move Right</xf:label>
     <xf:action ev:event="DOMActivate">
      <xf:insert nodeset="instance('save-data')/right-list/item" 
            origin="instance('save-data')/left-list/item[index('left-repeat')]" 
            at="last()" position="after" />
      <xf:delete nodeset="instance('save-data')/left-list/item[index('left-repeat')]" />
      
     </xf:action>
   </xf:trigger>
   <xf:trigger>
     <xf:label>Move Left</xf:label>
     <xf:action ev:event="DOMActivate">
      <xf:insert nodeset="instance('save-data')/left-list/item" 
            origin="instance('save-data')/right-list/item[index('right-repeat')]" 
            at="last()" position="after" />
      <xf:delete nodeset="instance('save-data')/right-list/item[index('right-repeat')]" />
      </xf:action>
   </xf:trigger>
</div>

<div class="right span-3">
   <h3>Right</h3>
   <xf:repeat nodeset="instance('save-data')/right-list/item" id="right-repeat">
    <xf:output ref="."/>
   </xf:repeat>
   
   <xf:output value="index('right-repeat')">
    <xf:label>Right Index: </xf:label>
   </xf:output>
</div>

示例 CSS

“span-3” 標籤使用標準藍圖框架在一個 24 列頁面中跨越三列。

其他 CSS 標籤與 XSLTForms 一起使用。請注意，列表中選定的專案是白色的。

    @namespace xf url("http://www.w3.org/2002/xforms");
    .left, .middle, .right {border: solid gray 1px; background-color: lavender;}
    .xforms-repeat-item-selected {color: blue; background-color: white;}

討論

右側的列表也可以重新排序。這通常是報表編寫工具的用例，允許使用者從列表中選擇列以生成報表。