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