(GWT) 调用TableSectionElement.setInnerSafeHtml()为何未渲染到DOM？

我来帮你搞定这个需求！你已经在view.ui.xml里给<tbody>加上了ui:field="tbody"，接下来只需要在对应的Java视图类里做几步，就能把记录动态输出到这个表格里了：

步骤1：在Java类中注入tbody元素 #

首先，在你的View类（通常是继承Composite的类）里，用@UiField注解把UIBinder里的tbody绑定到Java对象上。因为你用的是原生HTML表格，直接绑定到TableElement即可：

import com.google.gwt.dom.client.TableElement;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;

public class YourView extends Composite {
    // 注入UIBinder里的tbody元素
    @UiField
    TableElement tbody;

    // 构造方法里初始化UIBinder
    public YourView() {
        initWidget(YourViewUiBinder.INSTANCE.createAndBindUi(this));
    }

    // 后面加填充表格的方法...
}

步骤2：编写填充表格的方法 #

写一个专门的方法处理数据填充，先清空tbody现有内容，再循环数据列表逐个创建表格行和单元格：

import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.TableCellElement;
import com.google.gwt.dom.client.TableRowElement;
import java.util.List;

// 假设你有一个Customer实体类，包含id等字段
public class Customer {
    private int id;
    // 其他字段、getter/setter...
    public int getId() { return id; }
}

// 在YourView类里添加这个方法
public void populateCustomerTable(List<Customer> customerList) {
    // 先清空tbody里的旧内容
    tbody.setInnerHTML("");

    // 循环遍历数据，创建每一行
    for (Customer customer : customerList) {
        // 创建表格行
        TableRowElement row = Document.get().createTRElement();

        // 第一列：对应<th>&nbsp;</th>的空列
        TableCellElement emptyCell = Document.get().createTDElement();
        emptyCell.setInnerHTML("&nbsp;");
        row.appendChild(emptyCell);

        // 第二列：Customer #
        TableCellElement idCell = Document.get().createTDElement();
        idCell.setInnerText(String.valueOf(customer.getId()));
        row.appendChild(idCell);

        // 这里可以继续添加其他列，对应你省略的<th>内容
        // 比如：
        // TableCellElement nameCell = Document.get().createTDElement();
        // nameCell.setInnerText(customer.getName());
        // row.appendChild(nameCell);

        // 把创建好的行添加到tbody
        tbody.appendChild(row);
    }
}

步骤3：调用填充方法 #

在你的Presenter或者View的初始化逻辑里，拿到要展示的客户数据后，调用这个方法就行：

// 假设你从服务端或者本地拿到了customerList
List<Customer> customerList = getCustomerData();
yourView.populateCustomerTable(customerList);

额外小提示 #

如果需要给表格行添加点击事件，直接给TableRowElement绑定点击监听即可：

row.addClickHandler(event -> {
    // 处理行点击逻辑，比如获取当前客户ID
    Customer clickedCustomer = customer;
    // 后续操作...
});

内容的提问来源于stack exchange，提问作者Miniversal