Создание раскрывающейся строки в displaytag - PullRequest
Новая
       25

Создание раскрывающейся строки в displaytag

0 голосов
/ 24 апреля 2010

В настоящее время я использую displaytag для табличных данных, но хотел бы создать интерфейс, подобный kayak.com, где, когда пользователь щелкает строку, пользователю показывается более подробная информация о конкретной строке без обновления страницы.

Например, перед тем, как щелкнуть ссылку Подробности в строке 1:

row1 | col1 | col2 | col3 | COL4 | Detail
row2 | col1 | col2 | col3 | COL4 | Detail
row3 | col1 | col2 | col3 | col4 | Деталь

После нажатия:

row1 | col1 | col2 | col3 | COL4 | Detail
-------- row1Detail ---------------
row2 | col1 | col2 | col3 | COL4 | Detail
row3 | col1 | col2 | col3 | col4 | Деталь

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

например:. 

public class CustomDecorator extends TableDecorator {
   public String getDetailsRow() {
      MyObject object = (MyObject)this.getCurrentRowObject();
      return "<a onClick=\"myjsfunction(object.getId()); return true\">Details</a>";
   }
}

... и в JSP у меня будет свойство detailsRow, вложенное между тегами display: table: 

<display:column property="detailsRow" sortable="false" />

Какие-нибудь советы о том, как правильно вставить новую строку? Решение может быть в том, как написан javascript - я не специалист по Javascript, поэтому любые советы будут оценены. Есть ли лучший способ сделать это с displaytag? Я также не знаю какой-либо явной интеграции, которую displaytag имеет с javascript (например, параметром "onclick").

Это мой первый вопрос по stackoverflow, кстати - поэтому, пожалуйста, дайте мне знать, если вам нужно больше деталей.

Ответы [ 2 ]

1 голос
/ 28 июля 2010

Извините, что перетащил старый вопрос, но вот возможное решение, если кто-нибудь столкнется с этим. При переопределении TableDecorator переопределите метод finishRow, чтобы вернуть строку сведений. Этот метод будет запускаться после записи каждой строки в таблицу, поэтому для каждой реальной строки у вас будет скрытая строка с подробностями 

public String finishRow() {
   return "<tr id='row1Details' style='visibility: collapse'><td colspan='500'>My Details</td></tr>";
}

Тогда у вас есть просто JavaScript в столбце сведений, чтобы скрытая строка была видимой.

Редактировать: Дополнительные сведения:

Добавить новую функцию JavaScript 

function displayDetails(id) {
   document.getElementById(id + 'details').style.visibility = 'visible'
}

Тогда ваш обычный ряд будет выглядеть примерно так: 

<tr id='row1'><td> .... </td><td><a href="#" onClick="displayDetails('row1')">Details</a></td></tr>
0 голосов
/ 25 апреля 2010

Я не уверен, поможет ли это, но я большой поклонник DataTables.net . Он основан на jQuery, но он чрезвычайно мощный.

У них есть пример, который звучит очень похоже на то, что вы хотите: Детали строки

...