2

这是我的 xml 文件：-

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="final.xsl"?>  
  <root>
    <child1 entity_id = "1" value= "Asia">
        <child2 entity_id = "2" value = "india">
            <child3 entity_id = "3" value = "Gujarat">
                <child5 entity_id = "5" value ="Rajkot"></child5>
            </child3>
            <child4 entity_id = "4" value = "Rajshthan">
                <child6 entity_id = "6" value = "Ajmer"></child6>
            </child4>
        </child2>
    </child1>
    </root>

这是我的 XSLT 文件：-

<xsl:template match="*">
    <xsl:for-each select="//child2">
    <xsl:value-of select="*"/>
    <xsl:value-of select="@value" />    
</xsl:for-each>

这是我的 html 代码：-

<script>
function loadXMLDoc(dname)
{
    if (window.XMLHttpRequest)
    {
        xhttp=new XMLHttpRequest();
    }
    else
    {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhttp.open("GET",dname,false);
    xhttp.send("");
    return xhttp.responseXML;
}

function displayResult()
{
    xml=loadXMLDoc("final.xml");
    xsl=loadXMLDoc("books05.xsl");
    // code for IE
    if (window.ActiveXObject)
    {
        xml.addParameter("rss", test); 
        ex=xml.transformNode(xsl);
        document.getElementById("load").innerHTML=ex;
    }
    // code for Mozilla, Firefox, Opera, etc.
    else if (document.implementation && document.implementation.createDocument)
    {
        xsltProcessor=new XSLTProcessor();
        xsltProcessor.importStylesheet(xsl);
        resultDocument = xsltProcessor.transformToFragment(xml,document);
        document.getElementById("load").appendChild(resultDocument);
    }
}
</script>
<body onload="displayResult()">
<div id="load" />
</body>

输出是： -

India

现在我想在印度设置点击事件...点击印度然后显示那里的子元素，如古吉拉特邦和拉杰什坦......当显示古吉拉特邦和拉杰什坦时隐藏印度......

4

1 回答 1

1

这应该有效。首先，您可以像这样定义您的 XSLT：

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" indent="yes" omit-xml-declaration="yes"/>
  <xsl:param name="selected" />

  <xsl:template match="/*" priority="2">
    <xsl:apply-templates select="*[not($selected)] | //*[@entity_id = $selected]/*" />
  </xsl:template>

  <xsl:template match="*[*]">
    <span onclick="displayResult('{@entity_id}');">
      <xsl:call-template name="ItemText" />
    </span>
  </xsl:template>

  <xsl:template match="*" name="ItemText">
    <xsl:value-of select="concat(@value, '&#xA0;')"/>
  </xsl:template>
</xsl:stylesheet>

当它在没有任何参数的情况下运行时，它会生成一个顶级项目的列表，并带有 onclick 处理程序来调用具有自己的 JavaScript 函数entity_id：

<span onclick="displayResult('1');">Asia </span>

当它以 anentity_id作为selected参数的值运行时，它返回具有该实体 id 的项的子项列表：

<span onclick="displayResult('3');">Gujarat </span>
<span onclick="displayResult('4');">Rajshthan </span>

然后，您可以像这样编写 HTML 页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script>
        var xml = loadXMLDoc("final.xml");
        var xsl = loadXMLDoc("books05.xsl");

        function loadXMLDocActiveX(location) {
            var doc = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
            doc.async = false;
            doc.load(location);
            return doc;
        }

        function loadXMLDocOther(location) {
            xhttp = new XMLHttpRequest();
            xhttp.open("GET", location, false);
            xhttp.send("");
            return xhttp.responseXML;
        }

        function loadXMLDoc(dname) {
            if (window.ActiveXObject) {
                return loadXMLDocActiveX(dname);
            }
            else if (window.XMLHttpRequest) {
                return loadXMLDocOther(dname);
            }
        }

        function transformActiveX(xml, xsl, target, selected) {
            var transform = new ActiveXObject("MSXML2.XSLTemplate");
            transform.stylesheet = xsl;
            var processor = transform.createProcessor();
            processor.input = xml;

            if (selected) {
                processor.addParameter("selected", selected);
            }

            processor.transform();
            target.innerHTML = processor.output;
        }

        function transformOther(xml, xsl, target, selected) {
            var xsltProcessor = new XSLTProcessor();
            xsltProcessor.importStylesheet(xsl);

            if (selected) {
                xsltProcessor.setParameter(null, "selected", selected);
            }

            var resultDocument = xsltProcessor.transformToFragment(xml, document);
            target.innerHTML = "";
            target.appendChild(resultDocument);
        }

        function displayResult(selected) {
            var targetElement = document.getElementById("load");

            // code for IE
            if (window.ActiveXObject) {
                transformActiveX(xml, xsl, targetElement, selected);
            }
            // code for Mozilla, Firefox, Opera, etc.
            else if (document.implementation && 
                     document.implementation.createDocument) {
                transformOther(xml, xsl, targetElement, selected);
            }
        }
    </script>
</head>
<body onload="displayResult()">
    <div id="load">
    </div>
</body>
</html>

注意displayResult()函数现在有一个参数，当这个参数有一个值时，它把这个值作为一个 XSLT 参数传递给 XSLT。

应该这样做！

于 2013-02-09T15:19:32.640 回答