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