XForms/在表格中插入和删除

动机

您希望在表格中插入和删除记录。在此示例中，记录将附加到表格末尾，但任何选定的行都可以被删除。此示例进行“就地”表格编辑。除了实际表格外，没有其他单独的表单来启用查看新记录。

屏幕图像

示例程序

<html 
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"  
xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
xmlns:xf="http://www.w3.org/2002/xforms">
  <head>
    <style type="text/css">
     @namespace xf url("http://www.w3.org/2002/xforms");
     
        * { font-family: Ariel, Helvetica, sans-serif }

	.table-header {
	   display: table-row;
	}
   
	.column-header {
	   display: table-cell;
	   text-align: center;
	   width: 185px;
	   color: white;
	   background-color: gray;
	   font-weight: bold;
	}
    </style>
    <title>Demonstration of inserting and deleting records from a table</title>
    <xf:model id="phone-list">
       <xf:instance id="my-phone-list" src="phone-list.xml" xmlns="" />
       <xf:submission id="update-from-local-file" method="get" action="phone-list.xml"
           replace="instance" instance="my-phone-list"/>
       <xf:submission id="view-xml-instance" method="get" action="phone-list.xml" />
       <xf:submission id="save-to-local-file" method="put" action="phone-list.xml" />
    </xf:model>
  </head>
  <body>

    <!-- table header -->
    <div class="table-header">
	<div class="column-header">Name</div>
	<div class="column-header">Phone</div>
    </div>
    
    <!-- For each Person in the PersonList display the name and phone-->
    <xf:repeat ref="/PhoneList/Person" id="repeatPerson">
	<xf:input id="name-input" ref="Name"/>
	<xf:input ref="Phone"/>
	<br/>
    </xf:repeat>
    
     <xf:trigger>
        <xf:label>Add Person</xf:label>
        <xf:action ev:event="DOMActivate">
	   <xf:insert ref="/PhoneList/Person[last()]" position="after" at="last()"/>
	   <xf:setvalue ref="/PhoneList/Person[last()]/Name" value="''"/>
	   <xf:setvalue ref="/PhoneList/Person[last()]/Phone" value="''"/>
	   <!-- put the cursor in the name field -->
	   <xf:setfocus control="name-input"/>
        </xf:action>
     </xf:trigger>

     <xf:trigger>
        <xf:label>Delete Person</xf:label>
        <xf:delete nodeset="/PhoneList/Person[index('repeatPerson')]" 
            at="index('repeatPerson')" ev:event="DOMActivate" />
      </xf:trigger>
   <br/>
   
    <xf:submit submission="update-from-local-file">
       <xf:label>Reload</xf:label>
    </xf:submit>
    
    <xf:submit submission="save-to-local-file">
       <xf:label>Save</xf:label>
    </xf:submit>
    
    <xf:submit submission="view-xml-instance">
       <xf:label>View XML Instance</xf:label>
    </xf:submit>
    
  </body>
</html>

讨论

此示例使用 last() 和 index() XPath 函数来找出应操作表格的哪一行。

您还可以创建一个版本，该版本在每行中都有一个删除和添加按钮。在此设计中，index() 函数用于删除当前选定的行，并在当前选定的行之后插入。

在某些应用程序中，行的顺序很重要。您还可以向每行添加按钮以将选定的行上移或下移。

请注意，在添加行之后，您应该将插入光标移动到第一个字段。这是通过使用 setfocus 元素来完成的。

参考文献

下一页：突出显示选定的行 | 上一页：尾随插入和删除
主页： XForms