xml| Generate xml| Data | Database 4.4. To construct an XSL template that displays a tree structure
In the demotree.xml above, it is not possible to display the tree structure of the graph one alone, and the XML file needs to be converted using XSL templates.
Here you actually need to format the XML document in the following style:
<ul>
<li></li>
<li></li>
<ul>
<li></li>
<li></li>
</ul>
</ul>
Each Li represents a child node, UL said that its Li as a branch, under the Li for its child nodes, may be the branch, may be the leaf, depending on whether the child node has UL.
The XSL template feature defines how nested node nodes can be transformed into nested UL and Li representations.
Key code for template transformation:
<xsl:template match= "Node" >
<xsl:for-each select= ". [Number (layer) $eq $0] "><!-for each node, if his layer value is 0, make the following code changes-->
<xsl:if test= ". [href $eq $ '] "><!-if the href domain of a node is empty, it is a tree branch, and you need to retrieve the nested node--> below it
<xsl:element name = "Li" ><!-for the Li tag, not only specifies that its ID is goldheader, but also that its ordinal no is the ID value of the node-->
<xsl:attribute name= "id" >foldheader</xsl:attribute>
<xsl:attribute name= "No" ><xsl:value-of select= "id"/></xsl:attribute>
<xsl:value-of select= "Value"/>
</xsl:element>
......
</xsl:if>
<xsl:if test= ". [href $ne $ '] "> <!-if the href domain of the node is not empty, it is the leaf, it is converted to Li format, and the link, the target frame, the display string value is displayed in the form of a hyperlink-->
<li><xsl:element name = "a" >
<xsl:attribute name= "HREF" >
<xsl:value-of select= "href"/>
</xsl:attribute>
<xsl:attribute name= "TARGET" >
<xsl:value-of select= "Target"/></xsl:attribute>
<xsl:value-of select= "Value"/>
</xsl:element>
</li>
</xsl:if>
</xsl:for-each>
</xsl:template>
Because browsers are different for XSL support, in the current browser usage ratio, MSIE can be defined as the default browser standard, and MSIE only supports XSL2 without installing MSXSL3, so it does not support XSL variables, so In the implementation process here, the effect of the substitution variable implementation is implemented with nested code. The overall code is verbose, but easy to read and write and modify. Do not repeat the code, see the code implementation in the Treefunc.xsl file from the <xsl:template match= "Node" > Start to </xsl:template> end.
Tree-like display also relies on the support of JS, JS definition of the tree when clicking on the display changes, for example, when the current click on the branch node for the contraction State, click the effect is to expand the branch, showing the branches of the subordinate nodes, and vice versa.
First on the UL and Li for class identification, for the branch of Li, define its element ID as ' Foldheader ', for its following UL defined its element ID as ' foldinglist ', style.display ' none ' or ', Then define a change function, which functions as the interface changes after clicking on the branch node.
At the same time, because the hierarchy of the tree structure may be deeper, you need to consider when the customer browsing, refresh the page or reopen the same page should be saved to the customer's last browsing the level of the tree, where the implementation is to use cookies to keep each branch of the expansion of the Boolean value,
The operation function of the cookie and the action function on the Click event are all in the Treefunc.xsl file, and the following is a method written by JavaScript to handle HTML actions of the XML spanning tree.
/* Description is the action to take place when loading the page * *
var temp_str = ' Thexmltreecookie ';/* Defines a string that is used to find the node unwind state in a cookie.
var fl_n = 0;
Temp_str = temp_str + "=";
for (i=0;i<foldinglist.length;i++) {/* All branches are preset to not expand, and the number of statistics * *
temp_str=temp_str+ "0:";
}
Temp_str = temp_str.substring (0,temp_str.length-1);
Fl_n = TEMP_STR.LENGTH-17;
if ((Document.cookie = = ") | | (Wm_readcookie (' Thexmltreecookie '). Length!= Fl_n)) {/* When the cookie is not empty and there is a correct number of branches in the cookie, read the saved tree branch status in the cookie * *
Document.cookie = temp_str;/* Verify that the value in the cookie is not correct, give the new value * *
}
else {
The tree branches in the/*cookie are in the form of "1:0:0:0:1," which means that the first and fifth nodes are expanded, and that the second, third, four nodes are contracted, and that this form does not preserve the hierarchical properties of the trees, so the nodes here are not one by one responsive to the tree's performance, for example: If the fifth node is a child node of the fourth node, then although the fifth node is expanded, however, because the parent node is not expanded, it is not possible to see the five node when viewing the tree, only when the parent node of the fifth node, the grandparent node, until the top-level node is expanded, the five node is the visible expansion state. Here with function wm The _readcookie () method obtains the branch state string and presses ': ' to separate it into an array temp_s.
var temp_s = Wm_readcookie ("Thexmltreecookie"). Split (":");
/* Starting from the first branch, according to the corresponding position of the branch string, set the display properties of the branch node * *
for (i=0;i<foldinglist.length;i++) {
if (temp_s[i] = = 0) {
var tb = 0;
For (J=0;TB < 1;j++) {
if (document.all[j] = = Foldinglist[i]) {
TB = 1;
Document.all[j-1].style.liststyleimage= "url (/images/fold.gif)";
}
}
Foldinglist[i].style.display= "None";
}
else {
var tb = 0;
For (J=0;TB < 1;j++) {
if (document.all[j] = = Foldinglist[i]) {
TB = 1;
Document.all[j-1].style.liststyleimage= "url (/images/open.gif)";
}
}
Foldinglist[i].style.display= "";
}
}
}
/* Function Changge () is the action that is triggered when clicking the page, * *
function Change () {
/* Click on the object is the element on the page action to continue * *
if (!document.all)
Return
/* The expanded property of the branch node is obtained by the TEMP_SS array.
var temp_ss =wm_readcookie ("Thexmltreecookie"). Split (":");
var temp_s = ' Thexmltreecookie ';
temp_s = temp_s + ' = ';
* If you click on the element is the branch, then continue the action, here to determine whether the branch is by the judge click on the object ID is foldheader*/
if (event.srcelement.id== "Foldheader") {
/*srcindex assignment is the ordinal number of the HTML document to which the HTML element is clicked * *
var srcindex = Event.srcElement.sourceIndex;
The/*nested assignment is the next element of the click Element, which is the control element of the <ul>, the branch node and controls whether the tree is displayed and displayed by controlling the attributes of the element.
var nested = document.all[srcindex+1];
/* Traverse the Branch node, the role is when the click of the object is traversed to the HTML elements, make the corresponding changes, such as, change the cookie in the tree branch state string, so that the click of the node to expand or retract its child nodes, in the cookie save the current click on the Node ID value *
for (i=0;i<foldinglist.length;i++) {
if (foldinglist[i] = = nested) {
/* Define variable Clickid, save click on the object's no attribute, no attribute refers to the node in the XML to obtain the id attribute value * *
var Clickid;
Clickid = "clickid=" +event.srcelement.no;
Document.cookie =clickid;
if (temp_ss[i]==0) {
Temp_ss[i]=1;
}
else {
temp_ss[i]=0;
}
}
}
for (i=0;i<foldinglist.length;i++) {
temp_s =temp_s+temp_ss[i]+ ': ';
}
temp_s = temp_s.substring (0,temp_s.length-1);
Document.cookie = temp_s;
* * Replace the corresponding picture * *
if (nested.style.display== "None") {
Nested.style.display= '
Event.srcelement.style.liststyleimage= "url (/images/open.gif)"
}
else {
Nested.style.display= "None"
Event.srcelement.style.liststyleimage= "url (/images/fold.gif)"
}
* * Refresh the other pages/
Top.topFrame.location.reload ();
}
}
/* Specifies the processing function of the Click event on the page for Change () * *
Document.onclick=change;
/* function Wm_readcookie (name) is used to invoke Wm_getcookievalue (name) to obtain the value of a cookie string in the cookie named name.
function Wm_readcookie (name) {
Returns False if there is no cookie or gets the value and returns the value
if (Document.cookie = = "") {
return false;
}
else {
Return unescape (Wm_getcookievalue (name));
}
}
