Question

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

你有什么想法吗？

编辑：目标是创建响应式表格 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>

Answer 1

您所能做的就是添加样式名称而不是数据标签。要做到这一点，你需要在java代码中拥有自己的customCellTableBuilder，并在你创建列的代码部分添加样式名称，如＆＃34; address＆＃34;或＆＃34;名称＆＃34;等

Chcek这个 http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/cellview/client/AbstractCellTableBuilder.html

Answer 2

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

在方法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内实际使用您的Builder： yourGrid.setTableBuilder(tableBuilder);

另一个如何使用AbstractCellTableBuilder的示例，您可以找到here。

将数据标签添加到GWT-DataGrid

2 个答案: