Use XSLT to convert XML data into HTML

You can use a simple XSL style sheet to convert xml data into HTML. With the continuous evolution of XML specifications, it seems necessary to meet the needs of everyone in the new version. Unfortunately, simple conversions have always plagued the specifications. You can use a simple XSL style sheet to convert xml data into HTML. With the continuous evolution of XML specifications, it seems necessary to meet the needs of everyone in the new version. Unfortunately, simple conversions have always plagued the specifications.

Suppose I have an XML data that represents the content of a page. now I want to convert the content into a layout. Below is the XML to be converted:

 
 
     
          
               
    
     Folder 1
                
                    
                         
      
       File 1
                          
       
        
         
         
          string
          
         
          50
          
         
          some data
           
        
                      
                 
            
       
  
 

This content indicates a group of folders, files, and fields. Each folder contains files, and each file contains the fields used for input data. Each folder in the folder group is represented as a TR element and a TD element in the first row of a TABLE. Each file in the file group represents a TR element and a TD element in the first row of a TABLE element nested in the TR element of the folder. Each domain in the Domain Group is represented as an INPUT in the relevant file.

To implement this idea, we need to traverse XML and then construct a table based on XSL.

The following is the XSL used for this conversion:

 
 
  
  
       function getElementCount(nodelist, what) {        var rtrn = 0;        rtrn = nodelist[0].parentNode.selectNodes(what).length;        return (rtrn + 1); //1 is added for filler TD    }
  
  
           
                
     
      width:55px
                 
             
            
   
       
   
               
                    
                 
                                
   
   
 
                       
                            
     
      width:55px;
                             
                         
                        
   
                       
   
                               
                                    
                                 
                            
                            
                                 
      
       text
                                  
       
        
                                  
       
        
                              
     
     
                        
                            
   
   
                 
  
 

In the stylesheet tag, we set several namespaces, including the xsl namespaces that define all the xsl transformation tags. This allows us to create the msxml namespace for user functions that can be used in the style sheet. I use it to get all the child elements to get a COLSPAN attribute set marked by TD. The fn namespace used to join a group of user-defined functions. This namespace is created by msxml: script element.

Then, we create an external TABLE and the first TR. In TR, I create a TD for each folder specified in XML. I used the xsl: element tag because it allows me to add custom attributes or execute a function to set an attribute for the COLSPAN attribute in another TD element.

After creating the required TD for each folder, I began to create TR for each folder. I only add one TD to this TR, but I set its COLSPAN attribute to equal to the number of folder tags in the folder group and add one. The other one is used to fill spaces in a fixed layout TABLE.

To get COLSPAN, I pass in the current context (specified by "." here) and the name of the node I want to calculate. In my function, I get the number of nodes specified in the current context, paraentNode, and XPath query. Then, the function returns this quantity and adds it to fill in the TD.

With this TD, I embed another TABLE in it, which contains every file in the file group. From this point on, the process is the same as external TABLE conversion. The last step is to add fields in each file. This time I didn't create any more embedded tables, but added these fields to the current TD.

Once I complete the general layout, I can start to add the user interface function, such as hiding other folders and file lines until the user clicks the relevant tab. This function can be implemented by writing scripts that support this function, adding an onclick xsl: attribute element to the folder and file TD element, set its value to the name of the script function.

Finally, after the general functions are completed, you can add the class xsl: attributes and add the relevant classNames in the STYLE or CSS to get the desired appearance.

This example creates a foundation for the File-Folder-Field view used in the Web data solution deployment. Visit MSDN to find more information about Microsoft's XML specifications.

The preceding section uses XSLT to convert XML data into HTML content. For more information, see PHP Chinese website (www.php1.cn )!