Пустой t: dataTable может отображать недопустимый HTML? - PullRequest
Новая
       20

Пустой t: dataTable может отображать недопустимый HTML?

2 голосов
/ 09 июня 2010

Я использую Tomahawk 1.1.8, и я пытаюсь построить / визуализировать dataTable, даже если он пуст. (rendered = "true" как требование)

Учитывая, что наш Бин предоставляет пустой список (никакие строки не отображаются с помощью t: dataTable). Почему Tomahawks 't: dataTable просто отображает следующий «недопустимый» HTML, даже если у нас есть заголовок, содержащий более одного столбца: 

<tbody><tr><td></td></tr></tbody>

Код JSF для таблицы t: dataTable, как обычно: 

<t:dataTable value="#{bean.list}" var="dataItem">
  <h:column>
    <f:facet name="header">
      <h:outputText value="A"/>
    </f:facet>
    <h:outputText value="#{dataItem.a}" />
  </h:column>
  <h:column>
    <f:facet name="header">
      <h:outputText value="B"/>
    </f:facet>
    <h:outputText value="#{dataItem.b}" />
  </h:column>
  <h:column>
    <f:facet name="header">
      <h:outputText value="C"/>
    </f:facet>
    <h:outputText value="#{dataItem.c}" />
  </h:column>
</t:dataTable>

В отличие от этого, JSF h: dataTable отображает «лучше», просто пропуская полный тег tr (= даже если я не уверен, что это тоже может быть «недействительным» HTML): 

<tbody></tbody>

Моя проблема в этом заключается в отсутствии внутренних границ / правил столешницы, когда css "border-collapse: collapse;" активен.

Я подготовил два примера HTML. Один описывает фактический факт, а другой - возможное решение, как Томагавк мог бы это исправить: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>less td than th in one row</title>

<style type="text/css" media="screen">
table {
    border-collapse: collapse;
}

th, td {
    border:1px solid #716F70;
}
</style>
</head>
<body>
less td than th in one row: borders in FF3.x e.g. are rendered just for two table body cells:
<br />
<table border="1">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
    <th>6</th>

  </tr>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
    <td>cell4</td>
    <td>cell5</td>

    <td>cell6</td>
  </tr>
  <tr>
    <td>cell1</td>
    <td/>
  </tr>
</table>
</body>
</html>

... теперь, как было бы лучше с colspan: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>less td than th in one row: border with colspan ok</title>

<style type="text/css" media="screen">
table {
    border-collapse: collapse;
}

th, td {
    border:1px solid #716F70;
}
</style>
</head>
<body>
less td than th in one row: border (top) rendered for complete row, because of &lt;td colspan="5"/&gt; in cell 2 of row 2:
<br />
<table border="1">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
    <th>6</th>
  </tr>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell1</td>
    <td colspan="5"/>
  </tr>
</table>
</body>
</html>

Я думаю, что наилучшим вариантом может быть кольспан по всем клеткам ряда.

Некоторые браузеры, такие как IE или Opera, не возражают, однако Firefox делает, и я тоже могу принять это.

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

Спасибо

1 Ответ

3 голосов
/ 28 октября 2011

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

bodyStyleClass = "#{empty bean.list ? 'hidden' : ''}"
* 1004Класс CSS «скрытый» затем применяется к телу таблицы, поэтому у вас остаются только заголовки столбцов таблицы, и проблема с отображением исчезает.Ваш CSS должен выглядеть следующим образом: 
.hidden {
    display: none;
}

Надеюсь, это поможет любому, кто столкнется с этим в будущем. Этот вопрос переполнения стека также может быть полезен вам, так же как и ссылка на http://myfaces.apache.org/tomahawk-project/tomahawk/tagdoc/t_dataTable.html, если вы хотите сделать что-то еще, кроме применения класса к уровню тела вашей таблицы.

...