ข้อมูล XML สามารถแปลงเป็น HTML ได้โดยใช้สไตล์ชีต XSL แบบธรรมดา เนื่องจากข้อกำหนด XML ยังคงพัฒนาต่อไป ดูเหมือนว่าจำเป็นต้องตอบสนองความต้องการของทุกคนในเวอร์ชันใหม่ แต่น่าเสียดายที่การเปลี่ยนแปลงอย่างง่าย ๆ มักจะรบกวนข้อกำหนดดังกล่าว
สมมติว่าฉันมีข้อมูล XML ที่แสดงถึงเนื้อหาของเพจ และตอนนี้ฉันต้องการแปลงเนื้อหาให้เป็นเลย์เอาต์ นี่คือ XML ที่ฉันต้องการแปลง:
<?xml version='1.0'?>
<?xml-stylesheet type="text/xsl" href="article.xsl"?>
<xml>
<โฟลเดอร์>
<โฟลเดอร์>
<text>โฟลเดอร์ 1</text>
<ไฟล์>
<ไฟล์>
<text>ไฟล์ 1</text>
<ฟิลด์>
<ฟิลด์>
<ข้อมูล>
<ชนิด>สตริง</ชนิด>
<ความยาว>50</ความยาว>
<value>ข้อมูลบางส่วน</value>
</ข้อมูล>
</ฟิลด์>
</ฟิลด์>
</ไฟล์>
</ไฟล์>
</โฟลเดอร์>
</โฟลเดอร์>
</xml>
เนื้อหานี้แสดงถึงชุดของโฟลเดอร์ ไฟล์ และฟิลด์ แต่ละโฟลเดอร์ประกอบด้วยไฟล์ และแต่ละไฟล์มีช่องสำหรับป้อนข้อมูล แต่ละโฟลเดอร์ในกลุ่มโฟลเดอร์จะแสดงโดยองค์ประกอบ TR และองค์ประกอบ TD ในแถวแรกของตาราง แต่ละไฟล์ในกลุ่มไฟล์จะแสดงเป็นองค์ประกอบ TR และองค์ประกอบ TD ในบรรทัดแรกขององค์ประกอบ TABLE ที่ซ้อนอยู่ภายในองค์ประกอบ TR ของโฟลเดอร์ แต่ละโดเมนในกลุ่มโดเมนจะปรากฏเป็นอินพุตในไฟล์ที่เกี่ยวข้อง
เพื่อนำแนวคิดนี้ไปใช้ เราจำเป็นต้องสำรวจ XML และสร้างตารางตาม XSL
นี่คือ XSL ที่ใช้สำหรับการแปลงนี้:
<?xml version="1.0"?>
<xsl:สไตล์ชีท
xmlns:xsl=" http://www.w3.org/1999/XSL/Transform " version="1.0"
xmlns:msxsl="โกศ:schemas-microsoft-com:xslt"
xmlns:fn=" http://www.mycompany.com/mynamespace ">
<xsl:output method="html"/>
<msxsl:script language="JScript" นำไปใช้-prefix="fn">
ฟังก์ชั่น getElementCount (nodelist, อะไร) {
วาร์ตเริน = 0;
rtrn = nodelist[0].parentNode.selectNodes(อะไร).ความยาว;
return (rtrn + 1); //1 ถูกเพิ่มสำหรับฟิลเลอร์ TD
-
</msxsl:script>
<xsl:template match="/">
<เซลล์ตาราง = "0" เซลล์แพด = "0"
WIDTH = "100%" BORDER = "0" ID = "tblRoot" NAME = "tblRoot"
style="ตารางเค้าโครง:คงที่;">
<TR>
<xsl:for-each select="xml/folders/folder">
<xsl:ชื่อองค์ประกอบ="TD">
<xsl:attribute name="style">width:55px</xsl:attribute>
<xsl:value-of select="text"/>
</xsl:องค์ประกอบ>
</xsl:สำหรับแต่ละ>
<TD> </TD>
</TR>
<xsl:for-each select="xml/folders/folder">
<TR>
<xsl:ชื่อองค์ประกอบ="TD">
<xsl:ชื่อแอตทริบิวต์="colspan">
<xsl:value-of select="fn:getElementCount(., 'folder')"/>
</xsl:แอตทริบิวต์>
<เซลล์ตารางตาราง = "0" เซลล์แพด = "0"
WIDTH="100%" BORDER="0" style="table-layout:fixed;">
<TR>
<xsl:for-each select="files/file">
<xsl:ชื่อองค์ประกอบ="TD">
<xsl:attribute name="style">width:55px;</xsl:attribute>
<xsl:value-of select="text"/>
</xsl:องค์ประกอบ>
</xsl:สำหรับแต่ละ>
<TD> </TD>
</TR>
<xsl:for-each select="files/file">
<TR>
<xsl:ชื่อองค์ประกอบ="TD">
<xsl:ชื่อแอตทริบิวต์="colspan">
<xsl:value-of select="fn:getElementCount(., 'file')"/>
</xsl:attribute>
<xsl:for-each select="fields/field">
<xsl:ชื่อองค์ประกอบ="อินพุต">
<xsl:attribute name="type">ข้อความ</xsl:attribute>
<xsl:ชื่อแอตทริบิวต์="maxlength">
<xsl:value-of select="data/length"/>
</xsl:แอตทริบิวต์>
<xsl: ชื่อแอตทริบิวต์ = "ค่า">
<xsl:value-of select="data/value"/>
</xsl:แอตทริบิวต์>
</xsl:องค์ประกอบ><BR/>
</xsl:สำหรับแต่ละ>
</xsl:องค์ประกอบ>
</TR>
</xsl:สำหรับแต่ละ>
</ตาราง>
</xsl:องค์ประกอบ>
</TR>
</xsl:สำหรับแต่ละ>
/ตาราง
> </xsl:แม่แบบ>
</xsl:สไตล์ชีท>
ในแท็กสไตล์ชีท เราตั้งค่าเนมสเปซหลายรายการ รวมถึงเนมสเปซ xsl ที่กำหนดแท็กการแปลง xsl ทั้งหมด msxml เนมสเปซที่ช่วยให้เราสามารถสร้างฟังก์ชันผู้ใช้ที่สามารถใช้ในสไตล์ชีตได้ ฉันใช้สิ่งนี้เพื่อรับองค์ประกอบย่อยทั้งหมดเพื่อรับชุดแอตทริบิวต์ COLSPAN สำหรับแท็ก TD เนมสเปซ fn ใช้เพื่อรวมชุดฟังก์ชันที่ผู้ใช้กำหนดซึ่งสร้างโดยองค์ประกอบ msxml:script
จากนั้น เราสร้าง TABLE ภายนอกและ TR แรก ใน TR ฉันสร้าง TD สำหรับแต่ละโฟลเดอร์ที่ระบุใน XML ฉันใช้แท็ก xsl:element เนื่องจากแท็กอนุญาตให้ฉันเพิ่มแอตทริบิวต์ที่กำหนดเองหรือดำเนินการฟังก์ชันเพื่อตั้งค่าคุณสมบัติสำหรับแอตทริบิวต์ COLSPAN ในองค์ประกอบ TD อื่น
หลังจากสร้าง TD ที่จำเป็นสำหรับแต่ละโฟลเดอร์แล้ว ฉันก็เริ่มสร้าง TR สำหรับแต่ละโฟลเดอร์ ฉันเพิ่ม TD หนึ่งรายการลงใน TR นี้ แต่ฉันตั้งค่าแอตทริบิวต์ COLSPAN เท่ากับจำนวนแท็กโฟลเดอร์ในกลุ่มโฟลเดอร์บวกหนึ่งรายการ ส่วนพิเศษใช้เพื่อเติมช่องว่างในตารางเค้าโครงคงที่
ในการรับ COLSPAN ฉันส่งผ่านบริบทปัจจุบัน (ระบุที่นี่ด้วย ".") และชื่อของโหนดที่ฉันต้องการคำนวณ ในฟังก์ชันของฉัน ฉันได้รับบริบทปัจจุบัน paraentNode และจำนวนโหนดที่ระบุในแบบสอบถาม XPath จากนั้นฟังก์ชันจะส่งคืนจำนวนนี้บวกหนึ่งเพื่อเติม TD
ด้วย TD นี้ ฉันฝังตารางอื่นไว้ในนั้นซึ่งมีแต่ละไฟล์ในกลุ่มไฟล์ จากจุดนี้ไป กระบวนการจะเหมือนกับการแปลง TABLE ภายนอก ขั้นตอนสุดท้ายคือการเพิ่มฟิลด์ในแต่ละไฟล์ ครั้งนี้ฉันไม่ได้สร้างตารางแบบฝัง ฉันเพิ่งเพิ่มฟิลด์ลงใน TD ปัจจุบัน
เมื่อฉันจัดวางเค้าโครงทั่วไปเสร็จแล้ว ฉันสามารถเริ่มเพิ่มคุณลักษณะอินเทอร์เฟซผู้ใช้ เช่น การซ่อนโฟลเดอร์และแถวไฟล์อื่นๆ จนกว่าผู้ใช้จะคลิกบนแท็บที่เกี่ยวข้อง ฟังก์ชันนี้สามารถทำได้โดยการเขียนสคริปต์ที่รองรับฟังก์ชันนี้ เพิ่มองค์ประกอบ onclick xsl:attribute ให้กับโฟลเดอร์และองค์ประกอบ TD ของไฟล์ จากนั้นตั้งค่าเป็นชื่อของฟังก์ชันสคริปต์
สุดท้าย หลังจากที่ฟังก์ชันทั่วไปเสร็จสมบูรณ์ คุณสามารถเพิ่มคลาส xsl:attributes และเพิ่ม classNames ที่เกี่ยวข้องใน STYLE หรือ CSS เพื่อให้ได้รูปลักษณ์ที่คุณต้องการ
ตัวอย่างนี้สร้างพื้นฐานสำหรับมุมมองไฟล์-โฟลเดอร์-ฟิลด์ที่ใช้ในการปรับใช้โซลูชันข้อมูลเว็บ ไปที่ MSDN เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับข้อกำหนด XML ของ Microsoft