Запрос XML-файла с использованием HTML - PullRequest
Новая
       22

Запрос XML-файла с использованием HTML

1 голос
/ 14 декабря 2011

У меня есть файл .xml, в котором есть файл .xsl.Вывод которого может быть найден здесь .

Я пытаюсь создать HTML-страницу, где пользователь сможет ввести текст в поле поиска, например 'Year < 2009'.И он покажет таблицу, найденную выше, но только там, где Год меньше, чем 2009.

У меня нет особого представления, с чего начать, или что мне нужно изучить, чтобы создать эту функциональность.

Для справки приведен фрагмент XML: 

<?xml-stylesheet type="text/xsl" href="podcatalog.xsl"?>
<pods-papers>
  <inproceedings key="AbbadiSC85">
    <crossref>conf/pods/85</crossref>
    <author>Amr El Abbadi</author>,
    <author>Dale Skeen</author>,
    <author>Flaviu Cristian</author>,
    <title>An Efficient, Fault-Tolerant Protocol for Replicated Data Management.</title>,
    <pages>215-229</pages>,
    <year>1985</year>,
    <booktitle>PODS</booktitle>,
  </inproceedings>
  <inproceedings key="AbbadiT86">
    <crossref>conf/pods/86</crossref>
    <author>Amr El Abbadi</author>,
    <author>Sam Toueg</author>,
    <title>Availability in Partitioned Replicated Databases.</title>,
    <pages>240-251</pages>,
    <year>1986</year>,
    <booktitle>PODS</booktitle>,
  </inproceedings>
  <inproceedings key="Abdel-GhaffarA90">
    <crossref>conf/pods/90</crossref>
    <author>Khaled A. S. Abdel-Ghaffar</author>,
    <author>Amr El Abbadi</author>,
    <title>On the Optimality of Disk Allocation for Cartesian Product Files.</title>,
    <pages>258-264</pages>,
    <year>1990</year>,
    <booktitle>PODS</booktitle>,
  </inproceedings>
  <inproceedings key="Abiteboul83">
    <crossref>conf/pods/83</crossref>
    <author>Serge Abiteboul</author>,
    <title>Disaggregations in Databases.</title>,
    <pages>384-388</pages>,
    <year>1983</year>,
    <booktitle>PODS</booktitle>,
  </inproceedings>
</pods-papers>

, а вот XSLT ("podcatalog.xsl"): 

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <body>
  <h2>Pods Papers</h2>
  <table border="1">
    <tr bgcolor="#9ACD32">
      <th>Author</th>
      <th>Title</th>
      <th>Pages</th>
      <th>Year</th>
    </tr>
    <xsl:for-each select="pods-papers/inproceedings">
    <xsl:sort select="author"/>
    <tr>
      <td><xsl:value-of select="author"/></td>
      <td><xsl:value-of select="title"/></td>
      <td><xsl:value-of select="pages"/></td>
      <td><xsl:value-of select="year"/></td>
    </tr>
    </xsl:for-each>
  </table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

Обратите внимание: Я не обязательно ищу код или что написать, но, например, веб-страницу, которая показывает мне, как реализовать все или части этого

1 Ответ

1 голос
/ 14 декабря 2011

Вы можете сделать это:

Добавьте два элемента скрипта в ваш XSLT, которые будут отображаться в результирующем HTML. Первым будет jQuery (версия для Google, для удобства): 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

и второй манипулирует вашей таблицей результатов: 

<script type="text/javascript"><![CDATA[
$(function () {
  var filters = {};
  filters.run = function () {
    var i, $th = $("th"), $td, value;

    $("table tr:not(:visible)").show(); // clear any previously hidden rows

    for (var i=0; i<$th.length; i++) {  // for each filter string...
      if (this[i] > "") {
        $td = $th.eq(i).closest("table").find("tr:visible td:nth-child(" + (i+1) + ")");

        switch (this[i].slice(0,1)) { // first character is the operator
          case "<":
            value = $.trim( this[i].slice(1).toLowerCase() );
            $td.filter(function () {
              return $.trim( $(this).text().toLowerCase() ) >= value;
            }).closest("tr:visible").hide();
            break;
          case ">":
            value = $.trim( this[i].slice(1).toLowerCase() );
            $td.filter(function () {
              return $.trim( $(this).text().toLowerCase() ) <= value;
            }).closest("tr:visible").hide();
            break;
          case "/":
            value = new RegExp( this[i].slice(1) );
            $td.filter(function () {
              return !value.test( $.trim( $(this).text() ) );
            }).closest("tr:visible").hide();
            break;
          case "=":
            value = $.trim( this[i].slice(1).toLowerCase() );
            $td.filter(function () {
              return $.trim( $(this).text().toLowerCase() ) != value;
            }).closest("tr:visible").hide();
            break;
          default:
            value = $.trim( this[i].toLowerCase() );
            $td.filter(function () {
              return $.trim( $(this).text().toLowerCase() ).indexOf(value) == -1;
            }).closest("tr:visible").hide();
            break;
        }
      }
    }
  }

  $("th").each(function () {
    $(this).append("<input type='text'>");
  });

  $("th input").change(function () {
    var index = $(this).closest("th").prevAll("th").length;

    filters[index] = $.trim( $(this).val() );
    filters.run();
  });
});
]]></script>

Вот что это делает:

  1. Добавляет элемент <input> к каждому <th>. Этот вход служит фильтром для этого столбца.
  2. Он поддерживает набор filters, по одному для каждого индекса столбца.
  3. Всякий раз, когда изменяется вход (событие изменения происходит, когда поле теряет фокус), оно записывает значение поля в набор фильтров и запускает фильтр.
  4. «Запуск фильтра» означает:
    1. Проходит через каждую сохраненную строку фильтра, выясняет, какой оператор (если есть) использовался
    2. Находит все элементы <td> в соответствующем столбце и сравнивает их со значением фильтра.
    3. Если значение ячейки не соответствует фильтру, связанный <tr> скрыт.
    4. Повторите процесс для следующего столбца.

Этот процесс приводит к аддитивным фильтрам, т. Е. Вы можете сузить область поиска, отфильтровывая каждый столбец отдельно.

Первым символом строки фильтра считается оператор.

Поддерживаемые операторы:

  • < (меньше),
  • > (больше чем)
  • = (точное равенство)
  • / (регулярное выражение).
  • Любая другая строка фильтра интерпретируется как «содержит».
  • Добавьте больше операторов, если хотите.

Все сравнения, кроме регулярных выражений, не чувствительны к регистру.

Посмотрите это в действии на jsFiddle: http://jsfiddle.net/Tomalak/wjDrr/1/embedded/result/

P.S .:

Я знаю, что это в основном решает всю вашу проблему. Вы сказали, что понятия не имеете, с чего начать, поэтому я полагаю, вам будет довольно сложно разобраться в коде и в дальнейшем адаптировать его к вашим потребностям. :)

Приведенному выше коду не хватает некоторой элегантности, он ломается, как только на странице появляется более чем одна таблица, и его, безусловно, можно оптимизировать по скорости. Если вы заботитесь, вы можете улучшить эти вещи.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...