XForms/使用 XSLT 排序

动机

使用 XForms 创建表单时，一个反复出现的问题是缺乏排序功能。这是一个在 Firefox 中使用 XSLT 样式表对实例进行排序的示例。

Firefox XForms 示例

以下模型包含两个实例。第一个实例是我们将要排序的实例，第二个实例包含我们将用于执行排序的 XSLT 样式表。

<xf:model>
  <xf:instance id="default-instance">
    <data xmlns="">
      <item>
        <name>B-item</name>
        <date>2001-05-03</date>
      </item>
      <item>
        <name>A-item</name>
        <date>2005-05-03</date>
      </item>
      <item>
        <name>Z-item</name>
        <date>2003-05-03</date>
      </item>
      <item>
        <name>D-item</name>
        <date>2002-05-03</date>
      </item>
    </data>
  </xf:instance>

  <xf:instance id="stylesheet">
    <xsl:stylesheet
      xmlns="" 
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
      version="1.0">
      <xsl:template match="/">
        <data>
          <xsl:apply-templates select="data/item">
            <xsl:sort type="string" select="name"/>
          </xsl:apply-templates>
        </data>
      </xsl:template>
      <xsl:template match="*|@*|text()">
        <xsl:copy>
          <xsl:apply-templates select="*|text()|@*"/>
        </xsl:copy>
      </xsl:template>
    </xsl:stylesheet>
  </xf:instance>
</xf:model>

为了执行排序，我们将使用以下 JavaScript 代码。它将把第二个实例加载到 Firefox 样式表引擎中，然后获取第一个实例，进行转换，生成排序后的实例。然后，将转换后的实例插入模型，并执行重建、重新计算、重新验证和刷新操作。

function sort_instance(id) {
  // We get the instance element
  var instanceElement = document.getElementById(id);
  if (instanceElement!=null) {

   // XForms exposes the retrival of the instance document from the model element which *should*
   // be the parent for the instance element.
   var instance = instanceElement.parentNode.getInstanceDocument(id);

   if (instance!=null) {
      // Now creating the stylesheet, for this example the stylesheet document is also an instance
      // but it can be loaded from many difference sources
      var xslDom = instanceElement.parentNode.getInstanceDocument('stylesheet');

      // create an XSLTProcessor and attach the stylesheet
      var processor = new XSLTProcessor()
      processor.importStylesheet(xslDom);

      // now we do the sorting transformation
      var resultDom = processor.transformToDocument(instance, instance);

      // we then move the result info the instance dom
      instance.removeChild(instance.documentElement);
      instance.appendChild(resultDom.documentElement);

      // and performs the updates for XForms
      instanceElement.parentNode.rebuild();
      instanceElement.parentNode.recalculate();
      instanceElement.parentNode.revalidate();
      instanceElement.parentNode.refresh();
    }
  }
}

讨论

将样式表放在一个实例中，可以通过绑定控件来更改排序行为，并更改 XPath 表达式和其他 XSLT 语法等内容。

参考文献

此示例基于 [[1]http://landwehr.dk/blog/] 上的示例。