동기 부여:
정렬 기능을 사용하면 페이지의 데이터가 더욱 인간적으로 표시됩니다. 이는 웹사이트에서 흔히 볼 수 있는 기능적 효과입니다. 예전에는 많은 스크립트 코드를 사용하여 자동 정렬이 이루어졌는데, 이는 일반 마니아들에게는 어려운 일이었습니다. 그러나 XML을 사용하여 처리하는 것이 훨씬 간단합니다. 여러분의 페이지를 더욱 화려하게 만들어 보세요, 하하, 여러분도 기대되시나요?
재료:
XML 볼륨의 동적 정렬에는 paixu.xml 및 paixu.xsl이라는 두 개의 파일이 있습니다
.
페이지를 새로 고치지 않고도 사용자의 필요에 따라 데이터를 다시 정렬하고 표시할 수 있으므로 데이터 상호 작용 기능이 효과적으로 향상되고 페이지가 더욱 다채로워집니다.
효과:
여기에서 찾아보세요
암호:
paixu.xml
<?xml version="1.0" 인코딩="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="paixu.xsl" ?>
<블루아이디어>
<팀>
<blue_ID>1</blue_ID>
<blue_name>항해</blue_name>
<blue_text>간단한 정렬</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>XML 주제</blue_class>
</팀>
<팀>
<blue_ID>2</blue_ID>
<blue_name>날아다니는 새</blue_name>
<blue_text>당신과 결혼하면 당신에게 상처를 줄 것입니다</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>이리게이션 에센스</blue_class>
</팀>
<팀>
<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>웹 프로그래밍 본질</blue_class>
</팀>
<팀>
<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>
</팀>
<팀>
<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>자바스크립트</blue_class>
</팀>
</블루아이디어>
paixu.xsl
<?xml version="1.0" 인코딩="gb2312" ?>
<xsl:스타일시트 xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:템플릿 일치="/">
<html>
<머리>
<title> XML 볼륨에 대한 실용적인 팁(1): 동적 정렬</title>
<스타일>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ 글꼴: 12px "宋体", "Arial", "Times New Roman" }
테이블 { 글꼴 크기: 12px; 테두리: 0px double; 테두리 색상: #99CC99 #99CC99 #CCCCCC #CCCCCC;cellspacing:3; 텍스트 장식: 깜박임
범위 { 글꼴 크기: 12px; 색상: 빨간색 }
</style>
<스크립트>
기능택시(x)
{
스타일시트=document.XSLDocument;
소스=document.XMLDocument;
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
sortField.value=x;
Layer1.innerHTML=source.documentElement.transformNode(스타일시트);
}
</script>
</head>
<본문>
<p align="center"><span>XML 볼륨 실용 팁(1): 동적 정렬</span></p>
<div id="Layer1" name="Layer1">
<xsl:apply-templates select="BlueIdea" />
</div>
</body>
</html>
</xsl:템플릿>
<xsl:템플릿 일치="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellpacing="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="팀" order-by="blue_ID"/>
</table>
</xsl:템플릿>
<xsl:템플릿 매치="팀">
<tr 정렬="가운데">
<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:템플릿>
<xsl:템플릿 일치="blue_ID">
<td bgcolor="#eeeeee">
<xsl:값/>
</td>
</xsl:템플릿>
<xsl:템플릿 일치="blue_name">
<TD>
<xsl:값/>
</td>
</xsl:템플릿>
<xsl:템플릿 일치="blue_text">
<TD>
<xsl:값/>
</td>
</xsl:템플릿>
<xsl:템플릿 일치="blue_time">
<TD>
<xsl:값/>
</td>
</xsl:템플릿>
<xsl:템플릿 일치="blue_class">
<TD>
<xsl:값/>
</td>
</xsl:템플릿>
</xsl:스타일시트>
설명하다:
1) paixu.xml은 데이터 파일이므로 누구에게나 문제가 없을 것이라고 믿습니다.
2) paixu.xsl은 형식 파일이므로 주의해야 할 사항이 몇 가지 있습니다.
(1) 스크립트에서:
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
함수는 다음과 같습니다. order-by 속성을 가진 첫 번째 노드를 찾으므로 해당 노드는 다음과 같습니다.
<xsl:apply-templates select="팀" order-by="blue_ID"/>
따라서 첫 번째 onLoad 동안 order-by 값은 blue_ID입니다.
그리고 order-by의 값을 재정의하여 정렬의 목적을 달성합니다.
Layer1.innerHTML=source.documentElement.transformNode(스타일시트);
기능은 다음과 같습니다. XML 데이터를 변환한 후 Layer1을 변경하므로 'blue_name' 매개변수를 전달한 후
<td style="cursor:s-resize" onClick="taxis('blue_name)">이름</td>
order-by 값을 'blue_name'으로 수정합니다. 즉, 정렬 방법으로 'blue_name'을 사용합니다.
그런 다음 Layer1의 innerHTML 값을 다시 표시하여 새로 정렬된 콘텐츠를 표시합니다.
(2) 본문에서 :
order-by
이것을 놓칠 수 없습니다. 그렇지 않으면 찾을 수 없습니다. 효과를 살펴보세요! !
<?xml version="1.0" 인코딩="gb2312" ?>
한 가지 더:
Encoding="gb2312"는 대부분의 XML 교과서에 표시된 코드에 거의 추가되지 않습니다.
따라서 XML에서 중국어를 사용하면 오류가 보고됩니다. 그 이유는 이 선언이 작성되지 않았기 때문입니다.
추신:
모두가 동적 정렬 개념에 익숙해지면 우리의 구현 방법이 실제로 매우 간단하다는 것을 알게 될 것입니다.
order-by 값을 수정한 다음 다시 표시하면 됩니다.
동적 쿼리 및 동적 페이징 기능에서 우리는 여전히 이 아이디어를 따릅니다.