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;}

讨论

右侧的列表也可以重新排序。这通常是报表编写工具的用例，允许用户从列表中选择列以生成报表。