Source code download: http://resource.xml.org.cn/demo/XMLOrganize.rar
Online Demo: http://resource.xml.org.cn/demo/XMLOrganize/Organize.xml
Http://resource.xml.org.cn/demo/XMLOrganize/Organize_T.xml
Question XML and XSL generate class PowerPoint organization structure xych (original)
Keyword XML, XSL, organizational structure, Tree Structure
Organizational structure of XML and XSL-like PowerPoint
Recently, I have been studying XML and XSL related technologies for a long night. I have no worries and have a hard time. I want to try what I have learned during this time. Because of the hierarchy of the XML data format used every day, the general perception is similar to that of the tree structure. At the same time, it is confusing to implement an organizational structure chart in the work, therefore, I tried to use XML and XSL to implement an organizational structure similar to the one in PowerPoint that I used ASP to implement. It was a great deal of fun when I realized it. So I want to share the hardships, joys, difficulties, and gains together. I hope to share them with anyone who is just like me, a beginner in XML or a master or master. Okay, you have no reason to say it!
Shows the organizational structure of the implementation:
The image of this topic is as follows:
The main functions of the organization chart are as follows:
The correlation between layers is displayed without the limit of layers.
Click the "+" and "-" icons next to each node to expand or contract the subordinate layer of the node.
First, let's take a look at the relevant file structure.
The organize. XML data file is as follows:
<? XML version = "1.0" encoding = "UTF-8"?>
<? XML-stylesheet type = "text/XSL" href = "organize. XSL"?>
<Root>
<Layer>
<ID/>
<Text/>
</Layer>
<Layer>
<ID> 01 </ID>
<Text> XX group </text>
</Layer>
<Layer>
<ID> 0101 </ID>
<Text> Shanghai branch </text>
</Layer>
......
<Layer>
<ID> 0103 </ID>
<Text> Beijing branch </text>
</Layer>
<Layer>
<ID> 010101 </ID>
<Text> Personnel Department </text>
</Layer>
......
<Layer>
<ID> 010302 </ID>
<Text> Finance Department </text>
</Layer>
<Layer>
<ID> 01030101 </ID>
<Text> personnel department manager </text>
</Layer>
<Layer>
<ID> 01030102 </ID>
<Text> personnel department assistant </text>
</Layer>
......
<Layer>
<ID> 01010301 </ID>
<Text> Technical Manager </text>
</Layer>
......
</Root>
The content of the organize. XSL file is as follows:
<? XML version = "1.0" encoding = "UTF-8"?>
<XSL: stylesheet version = "1.0" xmlns: XSL = "http://www.w3.org/1999/XSL/Transform">
<XSL: template match = "/">
<HTML>
<Head>
<Title> organization structure </title>
</Head>
<Style type = "text/CSS">
......
</Style>
<Body>
<Center>
</BR>
<Span> organizational structure </span>
<Div>
<XSL: Call-Template Name = "getlayer">
<XSL: With-Param name = "layerid" select = "/root/layer [1]/ID"/>
</XSL: Call-template>
</Div>
</Center>
</Body>
</Html>
</XSL: Template>
<XSL: Template Name = "getlayer">
<XSL: Param name = "layerid"/>
<XSL: For-each select = "// layer [substring (ID, 1, string-length ($ layerid) = $ layerid
And string-length (ID) = string-length ($ layerid) + 2] ">
<Span>
...... ------ The DIV style sheet is omitted.
...... ------ Omitted operations related to the IMG icon
</Img>
<Span>
<A href = "#" target = "newwindow">
<XSL:Value-Of select = "./text"/>
</A>
</Span>
<Div>
...... ------ The DIV style sheet is omitted.
<XSL: Call-Template Name = "getlayer">
<XSL: With-Param name = "layerid" select = "ID"/>
</XSL: Call-template>
</Div>
</Span>
</XSL: For-each>
</XSL: Template>
</XSL: stylesheet>
The design idea is as follows:
The first thing that comes to mind is that the organizational structure is represented in the form of an upper layer (instead of the parent layer) between departments of each organization to include the lower layer (instead of the Child Layer ), at the same time, the child layers included in the parent layer are equal in parallel.
In this way, I think that each layer has the same structure: Describe to myself, and the container that contains the child layer, that is:
The image of this topic is as follows:
I thought of this.
<Span>
<Span> </span> -------- description of yourself
<Div> </div> -------- container containing child Layer
</Span>
Structure to represent a node. This ensures that the nodes of the same layer are parallel, and the descriptions of each node and the contained child layers are up and down in the form of representation.
After determining the node performance structure, consider the data presentation format of the organizational structure. To ensure the universality and availability of the data structure, I didn't consider organizing the relationship between nodes in the XML file as the actual organizational structure relationship. Because my XML files are dynamically generated from the database, for example, the generated XML file format is:
<Layer>
<ID> 01 </ID>
<Text> AAAA </text>
<Children>
<Layer>
<ID> 0101 </ID>
<Text> BBBB </text>
<Children>
......
</Children>
</Layer>
</Children>
</Layer>
Although it seems quite clear, the younger brother thinks that it is not very common and is also the most critical. He uses SQL statements to obtain such a data structure from the database, although the younger brother consciously has some economic advantages, he still cannot implement it :), so he gave up. Select the simplest implementation method as shown in organize. from the perspective of each node in XML, although they are equal to each other, they are associated by ID. The child node id = parent node ID + serial number, use IDs to establish mutual relationships (I .e., 0101,0102 ,.... 010n is a subnode of 01 ). In this way, the younger brother believes that even if a beginner breaks down a book for a while, the SQL statement that generates the data structure will be handled. When we see this, we hold down the table for the time being. As the saying goes, "developers who really consider for users are good developers, please pause all the tasks in your hands and make great effort for your younger brother. Well, at last, there was a round of applause ......
After determining the data presentation format of the organizational structure, the most important XSL to be considered is targeted. Because, the younger brother imagined the process as follows:
When retrieving a node, you must first consider extracting its own description, that is, the node's title,
At the same time, you must find and extract the child nodes to which the node belongs. Perform the same operations on each node in sequence.
In this case, according to the younger brother's many years of programming experience, he touched the east wall and hit the west wall. First, he vaguely felt recursion !. Haha .... What do you think about the solutions you have found? Oh, it's cool. The following is the actual solution that the younger brother thinks:
Start with the root node: <XSL: template match = "/">
Call the getlayer template to pass in the ID of the first subnode of the current root node as the variable parameter. template:
<XSL: Call-Template Name = "getlayer">
<XSL: With-Param name = "layerid" select = "/root/layer [1]/ID"/>
</XSL: Call-template>
In the template getlayer, when a node is retrieved, the description of the node is extracted first. This can be achieved through XSLT statements
<XSL:Value-Of select = "./text"/>
. (For more detailed and accurate descriptions of the following XSLT statements, please refer to relevant materials and books)
At the same time, you can retrieve your own child nodes from the XML data by using your own ID. This is through:
<XSL: For-each select = "// layer [substring (ID, 1, string-length ($ layerid) = $ layerid
And string-length (ID) = string-length ($ layerid) + 2] ">
Statement. In this statement, layerid is the input parent node ID. You can use this statement to retrieve the string-length ($ layerid) before all IDs) bit content = $ layerid and total length = string-length ($ layerid) + 2-bit serial number length node (here, the child node length of each node is the node length plus the length of two serial numbers, which can be changed as needed ). This statement also implements another function, that is, you do not need to consider the order or location of each node. In XML files, the order between the child node and the parent node can be jumped, and the order of each layer can be placed at will. I think this is also convenient for practical application.
Then, recursively call the template getlayer based on each retrieved subnode. Then obtain the content of each subnode and fill it in the container containing the child layer.
The above design ideas and solutions generate a PowerPoint-like organizational structure. In addition, by further consideration, only the XSL is modified and the same original XML file is used, the younger brother also implements the tree structure of the class Resource Manager. For example:
The image of this topic is as follows:
The idea is to change the node layout at the same layer from the current horizontal arrangement to the vertical arrangement of the upper and lower layers. The text direction of each node is changed from vertical to horizontal, and the corresponding scale-in can be added. Haha, isn't it easy!
Through this learning and practice process, although the younger brother was a bit dull, he also felt the flexibility and powerful functions of XML and XSL. The younger brother believes that XML provides data storage, while XSL provides data operations and performance. Like XML plug-ins, XSL has the same internal content. By working with different XSL, You can construct a variety of representations and applications. I don't know what you mean.
The above is the level limit for the younger brother's first attempt. Of course, it may need to be refined and refined. The reason why the younger brother is ugly is that he hopes to share it with you and get the comments from the audience, the greatest achievement the younger brother hopes to make progress in the guidance and criticism of the audience.
Complete source file download visit: http://mail.24mov.com/Organize/Organize.rar
Hope to discuss with you more: chenhaoonline@hotmail.com
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
