XML 실용 요령 1권: 동적 정렬
- 巴扎黑원래의
- 2017-03-19 15:42:171534검색
[소개] 정렬 기능은 우리 페이지의 데이터를 더욱 인간적으로 보이게 만드는데, 이는 웹사이트에서 흔히 볼 수 있는 기능적 효과입니다. 예전에는 많은 스크립트 코드를 사용하여 자동 정렬이 이루어졌는데, 이는 일반 마니아들에게는 어려운 일이었습니다. 그러나 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>正则表达式在ＵＢＢ论坛中的应用</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- 속성이 있는 첫 번째 항목을 찾습니다. 따라서 해당 노드는
9b92dc4fa42eb944186860fecb66172b
따라서 첫 번째 onLoad 중 order-by 값은 blue_ID입니다. .
그리고 order-by의 가치를 재정의하여 정렬의 목적을 달성합니다.
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
함수는 XML 데이터를 변환한 후 Layer1을 변경하는 것이므로 'blue_name' 매개변수가 전달된 후 ,
825cd6951af0987ab74b04cc8251a1d0Nameb90dd5946f0946207856a8a37f441edf
order-by 값을 'blue_name'으로 수정합니다. , 'blue_name'은 정렬 방법입니다.
그런 다음 Layer1의 innerHTML 값을 다시 표시하여 새로 정렬된 콘텐츠가 표시됩니다.
(2) 본문 중 :
order-by
필수입니다. 그렇지 않으면 효과를 볼 수 없습니다! !
79b0cfeb827856af9078f31693a2c888
또 다른 요점:
대부분의 XML 교과서에 표시된 코드에는 인코딩이 거의 추가되지 않습니다. ="gb2312" ,
따라서 XML에서 중국어를 사용하면 오류가 발생합니다. 그 이유는 이 선언이 작성되지 않았기 때문입니다.
후기:
모두가 동적 정렬 개념에 익숙해지고 나면 구현 방법이 실제로 매우 간단하다는 것을 알게 될 것입니다.
order-by 값을 수정한 후 다시 표시하면 됩니다.
동적 쿼리와 동적 페이징 기능에서는 여전히 이 아이디어를 따릅니다.
위 내용은 XML 실용 요령 1권: 동적 정렬의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!