跳轉到內容

XForms/停用按鈕

來自華夏公益教科書,開放的書籍,為開放的世界

您想要移除一個刪除按鈕,以防止移除列表中的最後一個專案。

在模型中建立繫結規則,僅當存在兩個或更多元素時才允許顯示按鈕。

當您有一個“刪除”按鈕,在列表中只剩下一個專案時,該按鈕必須不可見,這非常常見。

一種方法是使用每個觸發器的“ref”屬性,僅在存在多個專案時顯示。

<xf:trigger ref="self::node()[count(../name) &gt; 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) &gt; 1"/>

上面使用了 XPath count() 函式和大於運算子。但由於必須進行轉義,因此您必須使用“&gt;”而不是“>”。

或者,只有在例項中存在第二個人員記錄時,刪除按鈕才可見。

<xf:bind id="triggerDisplay" nodeset="display-delete" relevant="/data/person[2]"/>

這避免了必須計算所有元素並進行比較。因此,對於較長的專案列表,它效率更高。

這將建立一個稱為“triggerDisplay”的規則,將相關性鎖定到 XForms 例項。

螢幕影像

[編輯 | 編輯原始碼]
沒有刪除按鈕的表單
顯示刪除按鈕的表單
[編輯 | 編輯原始碼]

載入 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) &gt; 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 屬性

[編輯 | 編輯原始碼]

您也可以使用觸發器的 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>

XForms 1.1 規範

用於更改 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) &lt; 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>


下一頁: 只讀 | 上一頁: 相關
首頁: XForms
華夏公益教科書