XForms/禁用按钮
< XForms
您想要移除一个删除按钮，以防止移除列表中的最后一个项目。
在模型中创建绑定规则，仅当存在两个或更多元素时才允许显示按钮。
当您有一个“删除”按钮，在列表中只剩下一个项目时，该按钮必须不可见，这非常常见。
一种方法是使用每个触发器的“ref”属性，仅在存在多个项目时显示。
<xf:trigger ref="self::node()[count(../name) > 1]">
<xf:label>Delete Classifier</xf:label>
<xf:delete ev:event="DOMActivate" nodeset="instance('save-data')/name" at="index('name-repeat')"/>
</xf:trigger>
这将计算分类器的数量并显示“删除”按钮。
<data>
<name>John</name>
<name>Fred</name>
<name>Sue</name>
</data>
以下是一个示例规则
<xf:bind id="triggerDisplay" nodeset="display-delete" relevant="count(/data/person) > 1"/>
上面使用了 XPath count() 函数和大于运算符。但由于必须进行转义，因此您必须使用“>”而不是“>”。
或者，只有在实例中存在第二个人员记录时，删除按钮才可见。
<xf:bind id="triggerDisplay" nodeset="display-delete" relevant="/data/person[2]"/>
这避免了必须计算所有元素并进行比较。因此，对于较长的项目列表，它效率更高。
这将创建一个称为“triggerDisplay”的规则，将相关性锁定到 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>Disable Delete</title>
<xf:model>
<xf:instance id="myInstance" xmlns="">
<data>
<person>
<name>John Doe</name>
</person>
<display-delete/>
</data>
</xf:instance>
<!-- only display the delete button if there is more than one person -->
<xf:bind id="triggerDisplay" nodeset="display-delete"
relevant="count(/data/person) > 1"/>
<xf:submission id="mySubmission" method="post"
action="http://www.xformstest.org/cgi-bin/echo.sh"/>
</xf:model>
</head>
<body>
<h2>Demo of Button Disable</h2>
<xf:repeat nodeset="person">
<xf:input ref="name">
<xf:label>Name: </xf:label>
</xf:input>
</xf:repeat>
<hr/>
<xf:trigger>
<xf:label>Insert</xf:label>
<xf:insert nodeset="instance('myInstance')/person"
at="last()" position="after" ev:event="DOMActivate"/>
</xf:trigger>
<!-- This trigger is bound to the display rule -->
<xf:trigger bind="triggerDisplay">
<xf:label>Delete</xf:label>
<xf:delete nodeset="instance('myInstance')/person"
at="last()" ev:event="DOMActivate"/>
</xf:trigger>
<xf:submit submission="mySubmission">
<xf:label>Submit instance</xf:label>
</xf:submit>
</body>
</html>
您也可以使用触发器的 context 属性来告诉它何时触发。
<?xml version="1.0" encoding="UTF-8"?>
<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>Disable final delete trigger.</title>
<xf:model id="person">
<xf:instance id="person_xml" xmlns="">
<person>
<contacts>
<section name="Personal">
<contact/>
</section>
</contacts>
</person>
</xf:instance>
</xf:model>
</head>
<body>
<xf:repeat nodeset="contacts/section" id="repeat_section">
<fieldset>
<legend>
<xf:trigger>
<xf:label>-</xf:label>
<xf:hint>Delete this section.</xf:hint>
<xf:delete
context="instance('person_xml')/contacts"
nodeset="section[position()!=last()]"
at="index('repeat_section')"
ev:event="DOMActivate"/>
</xf:trigger>
<xf:input ref="./@name">
<xf:label>section name</xf:label>
</xf:input>
</legend>
<xf:repeat nodeset="contact" id="repeat_contact">
<xf:input ref=".">
<xf:label>contact</xf:label>
</xf:input>
<xf:trigger>
<xf:label>-</xf:label>
<xf:hint>Delete this contact.</xf:hint>
<xf:delete
context="instance('person_xml')/contacts/section[index('repeat_section')]"
nodeset="contact[position()!=last()]"
at="index('repeat_contact')"
ev:event="DOMActivate"/>
</xf:trigger>
<xf:trigger>
<xf:label>+</xf:label>
<xf:hint>Add a new contact after this one.</xf:hint>
<xf:insert nodeset="." at="index('repeat_section')" position="after" ev:event="DOMActivate"/>
</xf:trigger>
</xf:repeat>
</fieldset>
<xf:trigger>
<xf:hint>Add a new section after this one.</xf:hint>
<xf:label>add section</xf:label>
<xf:insert nodeset="." at="last()" position="after" ev:event="DOMActivate"/>
</xf:trigger>
</xf:repeat>
</body>
</html>
用于更改 delete 元素的范围内评估上下文的可选 XPath 表达式。如果提供了 bind 属性，则忽略此属性。如果没有给出该属性，则默认删除上下文是范围内评估上下文。否则，使用范围内评估上下文评估 XPath 表达式，并将第一个节点规则应用于获得删除上下文。如果删除上下文为空节点集，或者没有给出 context 属性并且节点集绑定节点集为空，则删除操作将终止，没有任何效果。
以下禁用删除和添加触发器，当项目数量接近最小和最大范围时。
在这种情况下，Person 元素的 XML 模式如下所示
<xs:element name="Phone" minOccurs="2" maxOccurs="5">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Phone Number Demo</title>
<!-- used to demonstract the steps in autogeneration of XML Schemas that have repeating items -->
<link rel="stylesheet" type="text/css" href="person-phone.css"/>
<xf:model>
<xf:instance xmlns="" src="../test-input-instances/22-two-to-five-repeats.xml" id="phones"/>
<!-- views are areas of the screen that are conditionally displayed -->
<xf:instance xmlns="" id="views">
<data>
<phone-delete-trigger/>
<phone-add-trigger/>
</data>
</xf:instance>
<!-- only display the trigger if we have a second phone number -->
<xf:bind id="phone-delete-trigger"
nodeset="instance('views')/phone-delete-trigger"
relevant="instance('phones')/Phone[3]"/>
<xf:bind id="phone-add-trigger"
nodeset="instance('views')/phone-add-trigger"
relevant="count(instance('phones')/Phone) < 5"/>
<xf:submission id="save" method="post" action="save.xq" replace="all"/>
</xf:model>
</head>
<body>
<xf:label class="group-label">Phone Numbers</xf:label>
<xf:repeat id="phone-number-repeat" nodeset="/PersonPhones/Phone">
<xf:input ref="PhoneDescriptionText" class="PhoneDescriptionText" id="PhoneDescriptionText"/>
<xf:input ref="PhoneNumber" class="PhoneNumber"/>
<!-- bind="phone-delete-trigger" -->
<xf:trigger bind="phone-delete-trigger">
<xf:label>Delete</xf:label>
<!-- this deletes the currently selected phone number -->
<xf:delete nodeset="instance('phones')/Phone[index('phone-number-repeat')]" ev:event="DOMActivate"/>
</xf:trigger>
</xf:repeat>
<xf:trigger bind="phone-add-trigger">
<xf:label>Add</xf:label>
<xf:action ev:event="DOMActivate">
<xf:insert nodeset="instance('phones')/Phone" at="last()" position="after"/>
<!-- this initialized the values of the phone number to null. Can also use an origin attribute. -->
<xf:setvalue ref="/PersonPhones/Phone[index('phone-number-repeat')]/PhoneDescriptionText" value=""/>
<xf:setvalue ref="/PersonPhones/Phone[index('phone-number-repeat')]/PhoneNumber" value=""/>
<!-- this puts the cursor in the first field of the new row we just added -->
<xf:setfocus control="PhoneDescriptionText"/>
</xf:action>
</xf:trigger>
</body>
</html>