XForms/插入

本實驗允許您將新行插入表格結構。我們這裡不使用 HTML 表格，而使用一個更新模型中的兩個專案的表單。

以下是您新增任何新資料之前的輸入

程式程式碼

<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>XForms insert example</title>
      <xf:model>
         <xf:instance>
            <PhoneList xmlns="">
               <Person>
                  <Name>Peggy</Name>
                  <Phone>123</Phone>
               </Person>
               <Person>
                  <Name>Dan</Name>
                  <Phone>456</Phone>
               </Person>
               <Person>
                  <Name>John</Name>
                  <Phone>789</Phone>
               </Person>
               <Person>
                  <Name>Sue</Name>
                  <Phone>234</Phone>
               </Person>
               <NewPerson>
                  <Name />
                  <Phone />
               </NewPerson>
            </PhoneList>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <fieldset>
         <legend>Company Phone List</legend>
         <p>
            <b>Name, Phone</b>
            <xf:repeat id="list" nodeset="/PhoneList/Person">
               <xf:input ref="Name" />
               <xf:input ref="Phone" />
            </xf:repeat>
         </p>
      </fieldset>
      <fieldset>
         <legend>Add New Person</legend>
         <p> <!-- here is where we get the new record -->
            <xf:input ref="/PhoneList/NewPerson/Name">
               <xf:label>Name:</xf:label>
            </xf:input>
            <br />
            <xf:input ref="/PhoneList/NewPerson/Phone">
               <xf:label>Phone:</xf:label>
            </xf:input>
            <xf:trigger>
               <xf:label>Insert After Selected Row</xf:label>
               <xf:action ev:event="DOMActivate">
                  <xf:insert nodeset="/PhoneList/Person" at="index('list')" position="after" />
                  <xf:setvalue ref="/PhoneList/Person[index('list')]/Name" value="/PhoneList/NewPerson/Name" />
                  <xf:setvalue ref="/PhoneList/Person[index('list')]/Phone" value="/PhoneList/NewPerson/Phone" />
               </xf:action>
            </xf:trigger>
         </p>
      </fieldset>
   </body>
</html>

討論

該程式有一個現有的電話列表模型，並在列表末尾有一個額外的 NewPerson 資料元素。新的個人資料與表格末尾的兩個欄位表單連結。當您點選插入按鈕（觸發器）時，它將從迷你表單複製資料元素並將其複製到現有模型內的新的位置。然後，整個列表將被更新。插入發生的精確位置由 index() 函式決定。索引是您最後選擇的行的編號。

有兩點需要注意。首先，您可以在執行插入之前選擇任何行。新專案將插入到該行的下一行。

第二點需要注意的是，您仍然需要能夠刪除記錄。那是下一個實驗。

下一頁：帶來源的插入 | 上一頁：內聯重複
首頁： XForms