XForms/尾部插入和删除

动机

在某些情况下，您可能只想在列表末尾添加或从列表末尾删除。该程序演示了如何使用 last() 函数来实现这一点。

屏幕截图

当您插入新行时，它将始终插入到列表的末尾。当您删除一行时，它也将从列表的末尾删除。

XForms 应用程序链接

示例程序

<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:xf="http://www.w3.org/2002/xforms" 
xmlns:ev="http://www.w3.org/2001/xml-events">
   <head>
      <title>Repeat Demo</title>
      <xf:model>
         <xf:instance xmlns="">
            <data xmlns="">
               <val>1</val>
               <val>2</val>
               <val>3</val>
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
         <xf:repeat nodeset="val">
            <div>
               <xf:output ref=".">
                  <xf:label>Value: </xf:label>
               </xf:output>
            </div>
         </xf:repeat>
         <xf:trigger>
            <xf:label>Insert new row</xf:label>
            <xf:action ev:event="DOMActivate">
               <xf:insert nodeset="val" position="after" at="last()" />
               <xf:setvalue ref="val[last()]" value="count(/data/val)" />
            </xf:action>
         </xf:trigger>
         <xf:trigger>
            <xf:label>Delete last row</xf:label>
            <xf:delete nodeset="val" at="last()" ev:event="DOMActivate" />
         </xf:trigger>
   </body>
</html>

讨论

请注意，xf:insert 使用 xf:action 元素在 DOM 激活时触发，而 xf:delete 使用 ev:event 属性来触发删除。这是因为我们需要在插入中包含 xf:setvalue。

因此，作为一般规则，如果您只需要在触发器中使用单个元素，则可以使用 ev:event 属性。但如果您需要包含多个必须全部触发的元素，则应将它们包装在 xf:action 元素中。

潜在问题：当您删除所有节点时，插入触发器将不再起作用。这是因为在这种情况下，插入元素上的节点集选择为空。如果节点集选择器为空，则插入触发器毫无意义（参见 '插入处理规则' 中的第一条规则）。

参考资料

下一页：插入和删除到表中 | 上一页：使用 CSS 确认删除
主页： XForms