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中以扩展或折叠行（https://www.datatables.net/examples/api/row_details.html）

Answer 1

它们不是设计为一起工作，要么你构建一个使用Datatables.js的小部件，要么你只使用GWT小部件，我建议作为一个起点，看一下{{3}的例子}，它使用CellTableBuilder。

作为参考，这些问题已经回答GWT Showcase。

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

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

1 个答案: