мотивация:
Функция сортировки делает данные на нашей странице более гуманными, что является очень распространенным функциональным эффектом, который мы наблюдаем на веб-сайтах. Раньше автоматическая сортировка выполнялась с использованием большого количества скриптового кода, что было сложно для обычных энтузиастов. Однако гораздо проще справиться с этим, используя XML. Сделайте свою страницу еще красивее, ха-ха, вы тоже в восторге!
Материал:
Динамическая сортировка томов XML состоит из двух файлов: paixu.xml и paixu.xsl.
Функции:
Без обновления страницы данные можно повторно отсортировать и отобразить в соответствии с потребностями пользователя, что эффективно улучшает функцию взаимодействия с данными и делает вашу страницу более красочной.
Эффект:
Просмотреть здесь
Код:
paixu.xml
<?xml version="1.0"coding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="paixu.xsl" ?>
<СиняяИдея>
<команда>
<blue_ID>1</blue_ID>
<blue_name>Парусный полет</blue_name>
<blue_text>Простая сортировка</blue_text>
<blue_time>11 января 2002 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>06.09.2001 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>23.11.2001 21:02:16</blue_time>
<blue_class>Сущность веб-программирования</blue_class>
</команда>
<команда>
<blue_ID>4</blue_ID>
<blue_name>Тайиланг</blue_name>
<blue_text>Полное руководство для классической группы управления на конец года, версия 0.1</blue_text>
<blue_time>08.12.2000 10:22:48</blue_time>
<blue_class>Ирригационная зона форума</blue_class>
</команда>
<команда>
<blue_ID>5</blue_ID>
<blue_name>ммкк</blue_name>
<blue_text>Сводка сообщений об ошибках Asp</blue_text>
<blue_time>13 октября 2001 г. 16:39:05</blue_time>
<blue_class>Javascript</blue_class>
</команда>
</BlueIdea>
paixu.xsl
<?xml version="1.0"coding="gb2312" ?>
<xsl:stylesheet xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:template match="/">
<html>
<голова>
<title> Практические советы для тома XML (1): динамическая сортировка</title>
<стиль>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{шрифт: 12 пикселей «宋体», «Arial», «Times New Roman» };
таблица {размер шрифта: 12 пикселей; граница: 0 пикселей двойной; цвет границы: # 99CC99 # 99CC99 #CCCCCC #CCCCCC;
диапазон {размер шрифта: 12 пикселей; цвет: красный};
</стиль>
<скрипт>
функция такси(x)
{
таблица стилей = document.XSLDocument;
источник = документ.XMLDocument;
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
sortField.value=x;
Layer1.innerHTML=source.documentElement.transformNode(таблица стилей);
}
</скрипт>
</голова>
<тело>
<p align="center"><span>Практические советы по объемам XML (1): динамическая сортировка</span></p>
<div id="Layer1" name="Layer1">
<xsl:apply-templates select="BlueIdea" />
</div>
</тело>
</html>
</xsl:шаблон>
<xsl:template match="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="team" order-by="blue_ID"/>
</таблица>
</xsl:шаблон>
<xsl:template match="команда">
<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:шаблон>
<xsl:template match="blue_ID">
<td bgcolor="#eeeeee">
<xsl:значение />
</td>
</xsl:шаблон>
<xsl:template match="blue_name">
<тд>
<xsl:значение />
</td>
</xsl:шаблон>
<xsl:template match="blue_text">
<тд>
<xsl:значение />
</td>
</xsl:шаблон>
<xsl:template match="blue_time">
<тд>
<xsl:значение />
</td>
</xsl:шаблон>
<xsl:template match="blue_class">
<тд>
<xsl:значение />
</td>
</xsl:шаблон>
</xsl:таблица стилей>
объяснять:
1) paixu.xml — это файл данных, думаю, у всех не возникнет проблем.
2) paixu.xsl — это файл формата, есть несколько вещей, на которые следует обратить внимание.
(1) В скрипте:
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
Функция такова: найти первый узел с атрибутом order-by, чтобы соответствующий ему узел был
<xsl:apply-templates select="team" order-by="blue_ID"/>
Следовательно, значение order-by во время первой загрузки равно blue_ID.
И мы достигаем цели сортировки, переопределяя значение order-by.
Layer1.innerHTML=source.documentElement.transformNode(таблица стилей);
Функция следующая: изменить Layer1 после преобразования данных XML, поэтому после передачи параметра blue_name
<td style="cursor:s-resize" onClick="taxis('blue_name)">Имя</td>
Мы изменяем значение order-by на blue_name, то есть используем blue_name в качестве метода сортировки.
Затем отобразите новый отсортированный контент, повторно отобразив значение InnerHTML Layer1.
(2) В тексте:
по заказу
Это нельзя пропустить, иначе не найти. Посмотрите на эффект! !
<?xml version="1.0"coding="gb2312" ?>
Еще одна вещь:
Encoding="gb2312" редко добавляется к коду, показанному в большинстве учебников по XML.
Поэтому, когда мы используем китайский язык в XML, будет сообщено об ошибке. Причина в том, что это объявление не написано.
постскриптум:
После того, как все познакомятся с идеей динамической сортировки, вы обнаружите, что наш метод реализации на самом деле очень прост.
Просто измените значение порядка, а затем отобразите его снова.
В функциях динамического запроса и динамического подкачки мы по-прежнему следуем этой идее.