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

黄舟
풀어 주다: 2017-02-10 16:09:32
원래의
1844명이 탐색했습니다.

동기:
정렬 기능을 사용하면 페이지의 데이터가 더욱 인간적으로 보이도록 할 수 있는데, 이는 웹사이트에서 흔히 볼 수 있는 기능적 효과입니다. 예전에는 많은 스크립트 코드를 사용하여 자동 정렬이 이루어졌는데, 이는 일반 마니아들에게는 어려운 일이었습니다. 그러나 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>正则表达式在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(&#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")
함수는 다음과 같습니다. 따라서 해당 노드는

따라서 첫 번째 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)를 주목하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿