집 > 기사 > 백엔드 개발 > XML 볼륨 실무 팁(1): 동적 정렬

XML 볼륨 실무 팁(1): 동적 정렬

黄舟원래의: 2017-02-10 16:09:321786검색

동기:
정렬 기능을 사용하면 페이지의 데이터가 더욱 인간적으로 보이도록 할 수 있는데, 이는 웹사이트에서 흔히 볼 수 있는 기능적 효과입니다. 예전에는 많은 스크립트 코드를 사용하여 자동 정렬이 이루어졌는데, 이는 일반 마니아들에게는 어려운 일이었습니다. 그러나 XML을 사용하여 처리하는 것이 훨씬 간단합니다. 여러분의 페이지를 더욱 화려하게 만들어 보세요, 하하, 여러분도 기대되시나요?

재료:
XML 볼륨의 동적 정렬
paixu.xml 및 paixu.xsl의 2개 파일이 있습니다.

기능:
페이지를 새로 고치지 않고 업데이트 재주문 사용자 자신의 필요에 따라 데이터를 표시하여 데이터 상호 작용 기능을 효과적으로 개선하고 페이지를 더욱 다채롭게 만듭니다.
효과:
여기에서 찾아보기
코드:
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(&#39;blue_ID&#39;)">编号</td>
<td style="cursor:s-resize" onClick="taxis(&#39;blue_name&#39;)">姓名</td>
<td style="cursor:s-resize" onClick="taxis(&#39;blue_text&#39;)">主题</td>
<td style="cursor:s-resize" onClick="taxis(&#39;blue_time&#39;)">发表时间</td>
<td style="cursor:s-resize" onClick="taxis(&#39;blue_class&#39;)">归类</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")
함수는 다음과 같습니다. 따라서 해당 노드는
9b92dc4fa42eb944186860fecb66172b
따라서 첫 번째 onLoad 중 order-by 값은 blue_ID입니다. .
그리고 order-by의 가치를 재정의하여 정렬의 목적을 달성합니다.

Layer1.innerHTML=source.documentElement.transformNode(stylesheet);

XML 데이터를 변환한 후 Layer1을 변경하는 기능이므로 'blue_name' 매개변수를 전달한 후

<td style="cursor:s-resize" onClick="taxis(&#39;blue_name)">姓名</td>

주문하겠습니다. 값은 'blue_name'으로 수정됩니다. 즉, 'blue_name'이 정렬 방법으로 사용됩니다.
그런 다음 Layer1의 innerHTML 값을 다시 표시하여 새로 정렬된 콘텐츠가 표시됩니다.

(2) 본문 중 :

order-by
필수입니다. 그렇지 않으면 효과를 볼 수 없습니다! !

<?xml version="1.0" encoding="gb2312" ?>

대부분의 XML 교과서에 나와 있는 코드에는 인코딩="gb2312"가 거의 추가되지 않습니다.
따라서 XML에서 중국어를 사용하면 오류가 보고됩니다. 서면 진술.

후기:
모두가 동적 정렬 개념에 익숙해지고 나면 구현 방법이 실제로 매우 간단하다는 것을 알게 될 것입니다.
order-by 값을 수정한 후 다시 표시하면 됩니다.
동적 쿼리와 동적 페이징 기능에서는 여전히 이 아이디어를 따릅니다.

위는 XML 볼륨에 대한 실용적인 팁입니다(1): 동적 정렬 콘텐츠. 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!

성명：

이전 기사：dom4j는 xml 파일을 작동합니다(전체)다음 기사：dom4j는 xml 파일을 작동합니다(전체)

XML 볼륨 실무 팁(1): 동적 정렬

관련 기사