子行（显示额外/详细信息）--无法在表格中显示子行

Question

我正在使用 Datatables.js（使用 JSNI）来显示和隐藏我的表（使用 Google web toolkit-gwt celltable 创建）的行信息。我的要求是单击按钮，我需要迭代表格并显示/隐藏信息，但它不起作用。

下面是我的代码：

function format(d) {
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'
                    + '<tr>'
                    + '<td>Full name:</td>'
                    + '</tr>' + '</table>'
;}


$wnd.$(function() {
    var table = $wnd.$('#example').DataTable({
        "columns" : [
            {
                "orderable" : false,
                "data" : null,
                "defaultContent" : ''
            },
            {
                "data" : "firstName"
            },
            {
                "data" : "middleName"
            },
            {
                "data" : "lastName"
            },
            {
                "data" : "age"
            },
            {
                "data" : "empId"
            },
            {
                "data" : "address"
            }
        ],
        "order" : [ [ 1, 'asc' ] ]
    });

    $wnd.jQuery('#btnId').click(function() {
        $wnd.$("#example tbody tr").each(function(i) {                  
            var rowNo = table.row(i);

            if (rowNo.child.isShown()) {
                // This row is already open - close it
                console.log("hide-->");
                rowNo.child.hide();
            }
            else {
                console.log(rowNo.data());
                rowNo.child( format(rowNo.data()) ).show();
            }
        });
    });
});

最后我看到一个不同之处是使用 GWT 创建的表会生成这种格式的表结构。

<tr __gwt_row="0" __gwt_subrow="0" class="GEUXRR0CPC">
    <td class="GEUXRR0COC GEUXRR0CAD GEUXRR0CBD">
        <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-16" tabindex="0">
            xxx
        </div>
    </td>
    <td class="GEUXRR0COC GEUXRR0CAD">
        <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-17">
            yyy
        </div>
    </td>
</tr>

因为文本将在<div> 内，而<td> 内。如何解决这个问题？如何显示/隐藏表格内的行？有什么帮助吗？

注意： 1）创建GWT CellTable 2)通过JSNI将JS(Datatables.js)注入CellTable中，展开或折叠行like(https://www.datatables.net/examples/api/row_details.html)

Answer 1

它们并非设计为一起工作，要么您构建一个使用 Datatables.js 的小部件，要么只使用 GWT 小部件，我建议作为起点，查看GWT Showcase 的示例，它使用CellTableBuilder。

作为参考，这个问题已经回答了here。

---

_{你可能会让它们玩得很好，但我怀疑有人试图这样做，你可以尝试使用 SuperDev 模式调试 GWT 代码，看看实际发生了什么。}