motivación:
La función de clasificación hace que los datos de nuestra página parezcan más humanos, lo cual es un efecto funcional muy común que hemos visto en los sitios web. En el pasado, la clasificación automática se realizaba con una gran cantidad de código de script, lo que resultaba difícil para los entusiastas comunes y corrientes. Sin embargo, es mucho más sencillo solucionarlo utilizando XML. Haz que tu página sea más hermosa, jaja, ¡tú también estás emocionado!
Material:
La clasificación dinámica de volúmenes XML tiene dos archivos: paixu.xml y paixu.xsl.
Las funciones son:
Sin actualizar la página, los datos se pueden reordenar y mostrar según las necesidades del usuario, lo que mejora efectivamente la función de interacción de datos y hace que su página sea más colorida.
Efecto:
Navegar aquí
Código:
paixu.xml
<?xml versión="1.0" codificación="gb2312" ?>
<?xml-stylesheet tipo="text/xsl" href="paixu.xsl" ?>
<Idea Azul>
<equipo>
<blue_ID>1</blue_ID>
<blue_name>Vuelo en vela</blue_name>
<blue_text>Una clasificación simple</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>Tema XML</blue_class>
</equipo>
<equipo>
<azul_ID>2</azul_ID>
<blue_name>pájaro volador</blue_name>
<blue_text>Casarse contigo te hará daño</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>Esencia de Riego</blue_class>
</equipo>
<equipo>
<azul_ID>3</azul_ID>
<blue_name>Kao Zi</blue_name>
<blue_text>Aplicación de expresiones regulares en el foro UBB</blue_text>
<blue_time>2001-11-23 21:02:16</blue_time>
<blue_class>Esencia de programación web</blue_class>
</equipo>
<equipo>
<blue_ID>4</blue_ID>
<blue_name>Tayilang</blue_name>
<blue_text>Manual completo del equipo de dirección clásico de fin de año v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class>Zona de riego del foro</blue_class>
</equipo>
<equipo>
<azul_ID>5</azul_ID>
<nombre_azul>mmkk</nombre_azul>
<blue_text>Resumen del mensaje de error de Asp</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>javascript</blue_class>
</equipo>
</AzulIdea>
paixu.xsl
<?xml versión="1.0" codificación="gb2312" ?>
<xsl:hoja de estilo xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:coincidencia de plantilla="/">
<html>
<cabeza>
<title> Consejos prácticos para volúmenes XML (1): clasificación dinámica</title>
<estilo>
cuerpo,BlueIdea,equipo,blue_ID,blue_name,blue_text,blue_time,blue_class{ fuente: 12px "宋体", "Arial", "Times New Roman" }
tabla {tamaño de fuente: 12px; borde: 0px doble; color de borde: #99CC99 #99CC99 #CCCCCC #CCCCCC; espacio entre celdas: 3; bgcolor:#eeeeee;
abarcar {tamaño de fuente: 12px; color: rojo}
</estilo>
<guión>
función taxis(x)
{
hoja de estilo=documento.XSLDocumento;
fuente=documento.XMLDocumento;
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
sortField.value=x;
Layer1.innerHTML=source.documentElement.transformNode(hoja de estilo);
}
</script>
</cabeza>
<cuerpo>
<p align="center"><span>Consejos prácticos para volúmenes XML (1): clasificación dinámica</span></p>
<div id="Capa1" nombre="Capa1">
<xsl:apply-templates select="BlueIdea" />
</div>
</cuerpo>
</html>
</xsl:plantilla>
<xsl: coincidencia de plantilla="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellpacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#FFCC99" align="centro">
<td style="cursor:s-resize" onClick="taxis('blue_ID')">Número</td>
<td style="cursor:s-resize" onClick="taxis('blue_name')">Nombre</td>
<td style="cursor:s-resize" onClick="taxis('blue_text')">Tema</td>
<td style="cursor:s-resize" onClick="taxis('blue_time')">Hora de publicación</td>
<td style="cursor:s-resize" onClick="taxis('blue_class')">Clasificación</td>
</tr>
<xsl:apply-templates select="equipo" order-by="blue_ID"/>
</tabla>
</xsl:plantilla>
<xsl:partida de plantilla="equipo">
<tr align="centro">
<xsl:apply-templates select="blue_ID" />
<xsl:apply-templates select="nombre_azul" />
<xsl:aplicar-templates select="blue_text" />
<xsl:apply-templates select="blue_time" />
<xsl:apply-templates select="blue_class" />
</tr>
</xsl:plantilla>
<xsl: coincidencia de plantilla="blue_ID">
<td bgcolor="#eeeeee">
<xsl:valor-de />
</td>
</xsl:plantilla>
<xsl:template match="nombre_azul">
<td>
<xsl:valor-de />
</td>
</xsl:plantilla>
<xsl: coincidencia de plantilla="texto_azul">
<td>
<xsl:valor-de />
</td>
</xsl:plantilla>
<xsl:template match="blue_time">
<td>
<xsl:valor-de />
</td>
</xsl:plantilla>
<xsl:template match="blue_class">
<td>
<xsl:valor-de />
</td>
</xsl:plantilla>
</xsl:hoja de estilo>
explicar:
1) paixu.xml es un archivo de datos, creo que no habrá ningún problema para todos.
2) paixu.xsl es un archivo de formato, hay varias cosas a las que prestar atención.
(1) En el script:
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
La función es: encontrar el primer nodo con el atributo ordenar por, por lo que su nodo correspondiente es
<xsl:apply-templates select="equipo" order-by="blue_ID"/>
Por lo tanto, el valor de order-by durante el primer onLoad es blue_ID.
Y logramos el propósito de ordenar redefiniendo el valor de ordenar por.
Layer1.innerHTML=source.documentElement.transformNode(hoja de estilo);
La función es: cambiar Layer1 después de convertir datos XML, por lo que después de pasar el parámetro 'blue_name',
<td style="cursor:s-resize" onClick="taxis('blue_name)">Nombre</td>
Modificamos el valor de ordenar por a 'blue_name', es decir, usamos 'blue_name' como método de clasificación.
Luego, muestre el nuevo contenido ordenado volviendo a mostrar el valor HTML interno de Layer1.
(2) En el texto:
ordenar por
No te lo puedes perder, de lo contrario no podrás encontrarlo. ¡Mira el efecto! !
<?xml versión="1.0" codificación="gb2312" ?>
Una cosa más:
La codificación="gb2312" rara vez se agrega al código que se muestra en la mayoría de los libros de texto XML.
Por lo tanto, cuando usamos chino en XML, se informará un error. El motivo es que esta declaración no está escrita.
posdata:
Una vez que todos estén familiarizados con la idea de clasificación dinámica, descubrirán que nuestro método de implementación es realmente muy simple.
Simplemente modifique el valor de orden por y luego muéstrelo nuevamente.
En las funciones de consulta dinámica y paginación dinámica, seguimos esta idea.