将数据标签添加到 GWT-DataGrid答案

【问题标题】：Add Data-Label to GWT-DataGrid将数据标签添加到 GWT-DataGrid
【发布时间】：2016-08-17 08:55:48
【问题描述】：

我想为我的数据网格单元格添加一个数据标签。但我不知道如何访问元素并为其添加样式属性？

你有什么想法吗？

编辑：目标是创建响应式表格，例如 http://codepen.io/maddesigns/pen/pHqnt

<table class="responsive">
  <thead>
      <tr>
          <th scope="col">Name</th>
          <th scope="col">Vorname</th>
          <th scope="col">Straße</th>
      <th scope="col"><abbr title="Postleitzahl">PLZ</abbr></th>
          <th scope="col">Ort</th>
      </tr>
  </thead>
<tr>
    <td data-label="Name">Shannon</td>
    <td data-label="Vorname">Cheyenne</td>
    <td data-label="Straße">Ap #239-2170 Phasellus Av.</td>
    <td data-label="PLZ">94075</td>
    <td data-label="Ort">Berlin</td>
</tr>
</table>

【问题讨论】：

添加数据标签是什么意思？你想设置所有表格单元格的样式吗？你能发布你的代码的一部分吗？
点赞<tr> <td data-label="name">Lindsey</td> <td data-label="forename">Tanner</td> <td data-label="street">511-635 Malesuada Rd.</td> <td data-label="PLZ">77791</td> <td data-label="city">Beaconsfield</td> </tr>

标签： java gwt datagrid

【解决方案1】：

您所能做的就是添加样式名称而不是数据标签。为此，您需要在 java 代码中拥有自己的 customCellTableBuilder，并在创建列的代码部分添加样式名称，如“地址”或“名称”等。

检查一下 http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/cellview/client/AbstractCellTableBuilder.html

【讨论】：

其实你可以给一个TD元素一个属性gwtproject.org/javadoc/latest/com/google/gwt/dom/builder/shared/…

【解决方案2】：

最简单的方法是通过复制DefaultCellTableBuilder 的代码并稍微编辑它来扩展AbstractCellTableBuilder。

在方法buildRowImpl你会发现这个代码：

  // Build the cell.
  HorizontalAlignmentConstant hAlign = column.getHorizontalAlignment();
  VerticalAlignmentConstant vAlign = column.getVerticalAlignment();
  TableCellBuilder td = tr.startTD();
  td.className(tdClasses.toString());

您可以在此处为您的td 元素添加一个属性，如下所示：

String dataLabel = "";
switch (curColumn) {
case 0: dataLabel = "Name";
    break;
case 1: dataLabel = "Vorname";
    break;
case 2: dataLabel = "Straße";
    break;
case 3: dataLabel = "PLZ";
    break;
case 4: dataLabel = "Ort";
    break;
default:
    break;
}
td.attribute("dataLabel", dataLabel);

不要忘记在您的DataGrid 中实际使用您的构建器： yourGrid.setTableBuilder(tableBuilder);

另一个如何使用AbstractCellTableBuilder的例子你可以找到here。

【讨论】：