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>