使用HTML和Freemarker显示treetable

Question

我必须做一个树结构来显示来自Java的数据.我正在使用jQuery的treetable插件,我无法获得我想要的输出.这是我的代码.

Freemarker:

<table id="dt_basic" class="table table table-bordered table-hover" width="100%">
                    <thead>
                        <tr>
                            <#list rows.getCols() as col>
                            <th>${col.getColumnName()}</th>
                            </#list>
                        </tr>
                    </thead>
                    <tbody>
                        <#list rows.getRows() as row>
                            <#if !parent??>
                                <#assign parent = row />
                                    <tr data-tt-id="${parent[rows.getCols()[0].getColumnName()]}" data-tt-branch="true">
                                        <td>${parent[rows.getCols()[0].getColumnName()]}</td>
                                        <td colspan="${rows.getCols()?size-1}"></td>
                                    </tr>
                            <#elseif row[rows.getCols()[0].getColumnName()] != parent[rows.getCols()[0].getColumnName()]>
                                <#assign parent = row />
                                    <tr data-tt-id="${parent[rows.getCols()[0].getColumnName()]}">
                                        <td>${row[col.getColumnName()]}</td>
                                        <td colspan="${rows.getCols()?size-1}"></td>
                                    </tr>
                            </#if>


                            <tr data-tt-id="1.1" data-tt-parent-id="${row[rows.getCols()[0].getColumnName()]}">
                                <#list rows.getCols() as col>
                                    <#if col?is_first>
                                        <td>${row[col.getColumnName()]}</td>
                                    <#else>
                                    <#if col.isRightAligned()>
                                        <td name="${col.getColumnName()}" align='RIGHT'>${row[col.getColumnName()]}</td>
                                    <#else>
                                        <td name="${col.getColumnName()}">${row[col.getColumnName()]}</td>
                                    </#if>
                                    </#if>
                                </#list>
                            </tr>

                        </#list>
                    </tbody>
                </table>

jQuery的

$("#dt_basic").treetable({ 
        expandable: true,
        clickableNodeNames: true,
        onNodeExpand: function() {
            $.when( this.show() ).done( function () {
                $("#dt_basic").resizableColumns('syncHandleWidths');
            });
        },
        onNodeCollapse: function() {
            $("#dt_basic").resizableColumns('syncHandleWidths');
        }
    });

    $("#dt_basic").wrap( "<div class='tableWrap'></div>" );

我遇到的问题非常不同:

首先,当我创建时$("#dt_basic").treetable,我收到一个错误:

未捕获的TypeError:无法读取未定义的属性"addChild"

另一个问题是我无法以我想要的方式显示视图.它看起来像这样:

Node - > All node's childs
New Node -> All new node's childs

但是我得到了:

Node - > Child
Node - > Child 
New Node - > New node child
New Node - > New node child