[소개] 정렬 기능은 우리 페이지의 데이터를 더욱 인간적으로 보이게 만드는데, 이는 웹사이트에서 흔히 볼 수 있는 기능적 효과입니다. 예전에는 많은 스크립트 코드를 사용하여 자동 정렬이 이루어졌는데, 이는 일반 마니아들에게는 어려운 일이었습니다. 그러나 xml을 사용하여 처리하는 것이 훨씬 간단합니다.
정렬 기능을 사용하면 페이지의 데이터가 더욱 인간적으로 만들어집니다. 이는 웹사이트에서 흔히 볼 수 있는 기능적 효과입니다. 예전에는 많은 스크립트 코드를 사용하여 자동 정렬이 이루어졌는데, 이는 일반 마니아들에게는 어려운 일이었습니다. 그러나 xml을 사용하여 처리하는 것이 훨씬 간단합니다. 여러분의 페이지를 더욱 화려하게 만들어 보세요, 하하, 여러분도 기대되시나요?
재료:
XML 볼륨의 동적 정렬
paixu.xml 및 paixu.xsl이라는 두 가지 파일이 있습니다.
기능:
페이지를 새로 고치지 않고 업데이트합니다. 재주문 사용자 자신의 필요에 따라 데이터를 표시하여 데이터 상호 작용 기능을 효과적으로 개선하고 페이지를 더욱 다채롭게 만듭니다.
효과:
여기에서 찾아보기
코드:
paixu.xml
<?xml version="1.0" encoding="gb2312" ?> <?xml-stylesheet type="text/xsl" href="paixu.xsl" ?> <BlueIdea> <team> <blue_ID>1</blue_ID> <blue_name>Sailflying</blue_name> <blue_text>一个简单的排序</blue_text> <blue_time>2002-1-11 17:35:33</blue_time> <blue_class>XML专题</blue_class> </team> <team> <blue_ID>2</blue_ID> <blue_name>flyingbird</blue_name> <blue_text>嫁给你,是要你疼的</blue_text> <blue_time>2001-09-06 12:45:51</blue_time> <blue_class>灌水精华</blue_class> </team> <team> <blue_ID>3</blue_ID> <blue_name>苛子</blue_name> <blue_text>正则表达式在UBB论坛中的应用</blue_text> <blue_time>2001-11-23 21:02:16</blue_time> <blue_class>Web 编程精华</blue_class> </team> <team> <blue_ID>4</blue_ID> <blue_name>太乙郎</blue_name> <blue_text>年末经典分舵聚会完全手册 v0.1</blue_text> <blue_time>2000-12-08 10:22:48</blue_time> <blue_class>论坛灌水区</blue_class> </team> <team> <blue_ID>5</blue_ID> <blue_name>mmkk</blue_name> <blue_text>asp错误信息总汇</blue_text> <blue_time>2001-10-13 16:39:05</blue_time> <blue_class>javascript脚本</blue_class> </team> </BlueIdea>
paixu.xsl
<?xml version="1.0" encoding="gb2312" ?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> <html> <head> <title> XML卷之实战锦囊(1):动态排序</title> <style> body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ font: 12px "宋体", "Arial", "Times New Roman"; } table { font-size: 12px; border: 0px double; border-color: #99CC99 #99CC99 #CCCCCC #CCCCCC; cellpadding:3;cellspacing:3; bgcolor:#eeeeee; text-decoration: blink} span { font-size: 12px; color: red; } </style> <script> function taxis(x) { stylesheet=document.XSLDocument; source=document.XMLDocument; sortField=document.XSLDocument.selectSingleNode("//@order-by"); sortField.value=x; Layer1.innerHTML=source.documentElement.transformNode(stylesheet); } </script> </head> <body> <p align="center"><span>XML卷之实战锦囊(1):动态排序</span></p> <p id="Layer1" name="Layer1"> <xsl:apply-templates select="BlueIdea" /> </p> </body> </html> </xsl:template> <xsl:template match="BlueIdea"> <table width="500" border="1" align="center" cellpadding="1" cellspacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD"> <tr bgcolor="#FFCC99" align="center"> <td style="cursor:s-resize" onClick="taxis('blue_ID')">编号</td> <td style="cursor:s-resize" onClick="taxis('blue_name')">姓名</td> <td style="cursor:s-resize" onClick="taxis('blue_text')">主题</td> <td style="cursor:s-resize" onClick="taxis('blue_time')">发表时间</td> <td style="cursor:s-resize" onClick="taxis('blue_class')">归类</td> </tr> <xsl:apply-templates select="team" order-by="blue_ID"/> </table> </xsl:template> <xsl:template match="team"> <tr align="center"> <xsl:apply-templates select="blue_ID" /> <xsl:apply-templates select="blue_name" /> <xsl:apply-templates select="blue_text" /> <xsl:apply-templates select="blue_time" /> <xsl:apply-templates select="blue_class" /> </tr> </xsl:template> <xsl:template match="blue_ID"> <td bgcolor="#eeeeee"> <xsl:value-of /> </td> </xsl:template> <xsl:template match="blue_name"> <td> <xsl:value-of /> </td> </xsl:template> <xsl:template match="blue_text"> <td> <xsl:value-of /> </td> </xsl:template> <xsl:template match="blue_time"> <td> <xsl:value-of /> </td> </xsl:template> <xsl:template match="blue_class"> <td> <xsl:value-of /> </td> </xsl:template> </xsl:stylesheet>
설명:
1) paixu.xml은 데이터 파일이므로 누구나 문제가 없을 것이라고 믿습니다.
2) paixu.xsl은 형식 파일이므로 주의할 점이 몇 가지 있습니다.
(1) 스크립트에서:
sortField=document.XSLDocument.selectSingleNode("//@order-by");
함수는 다음과 같습니다. order- 속성이 있는 첫 번째 항목을 찾습니다. 따라서 해당 노드는
따라서 첫 번째 onLoad 중 order-by 값은 blue_ID입니다. .
그리고 order-by의 가치를 재정의하여 정렬의 목적을 달성합니다.
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
함수는 XML 데이터를 변환한 후 Layer1을 변경하는 것이므로 'blue_name' 매개변수가 전달된 후 ,
위 내용은 XML 실용 요령 1권: 동적 정렬의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!