javascript - 使用过滤的 Ember 数据的 jQuery DataTables - 列宽度不会调整大小

Question

首先介绍一些背景信息:

我有一个 Ember 组件，它使用 Handlebars {{#each results as |result|}}{{/each}} 来填充 tbody 元素包含结果中所有数据的一堆行。

在此表上方，有一个切换开关，用于设置表是应显示所有条目还是仅显示 isEnabled 设置为 true 的条目。此切换设置 viewAll 组件属性。翻转切换时，数据会正确更改，但数据表中的列会延伸到页面之外(如下所示)。

我尝试在 viewAll 属性上进行设置和观察，以便每次更改时我都会调用 draw()。我尝试调用 resultsTable.columns.adjust().draw()，但没有成功。

有人知道发生了什么事吗？

作为引用，环境使用 Bootstrap 3、Ember 2.6.0、Datatables 1.10.12 和 jQuery 2.2.4。

这是模板(该表存在于 Bootstrap 面板主体内):

<tbody>
    {{#each results as |result|}}
        <!--Ember truth-helpers used here-->
        {{#if (or (and (not viewAll) result.isEnabled) viewAll)}}
            <tr data-id={{result.id}}>
                <td>{{result.time}}</td>
                <td>{{result.a}}</td>
                <td>{{result.b}}</td>
                <td>{{result.c}}</td>
                <td>{{result.d}}</td>
                <td>{{result.e}}</td>
                <td>{{result.f}}</td>
                <td>{{result.g}}</td>
                <td>{{result.h}}</td>
            </tr>
        {{/if}}
    {{/each}}
</tbody>

这是组件代码(在 didInsertElement Hook 内):

Ember.run.scheduleOnce('afterRender', this, function() {
    resultsTable = this.$("#tbl_results").DataTable(
        {   
            "responsive":true,
            "autoWidth": true,
            "select": true
        }
    );
});

还有截图: Screenshot showing row overflow

非常感谢任何建议。谢谢!

Answer 1

因此，就目前情况而言，在排除所有评论的情况下，我已经找到了这个解决方案(如我的评论之一所述)。

我在 results 集上放置了一个观察者，并通过切换更新了 viewAll 属性:

updater : Ember.observer("results.@each", "viewAll", function(){
    recreateTable(this.get("viewAll"), this.get("results"));
}),

调用:(这会破坏表并重新创建它。效率非常低，但结果通常相当小，这就是我现在所坚持的)

function recreateTable(viewAll, results){
    let data = null;
    if(resultsTable) {
        resultsTable.clear(); // Clear first to avoid dupe data
        resultsTable.destroy();
    }
    if (viewAll) {
        data = results;
    } else {
        data = results.filterBy("isEnabled", true);
    }
    let dataArray = [];

    data.forEach( function(item){
        dataArray.push([
                "<time class='timeago' datetime='" + item.get("time") + "'>" + item.get('time') + "</time>",
                item.get("a"),
                item.get("b"),
                item.get("c"),
                item.get("d"),
                item.get("e"),
                item.get("f"),
                item.get("g"),
                item.get("h")
            ]
        );
    });

    resultsTable = Ember.$("#tbl_results").DataTable(
        {   
            "aaData": dataArray,
            "responsive":true,
            "autoWidth": true,
            "select": true
        }
    );

    Ember.$("time.timeago").timeago();
}

对于那些好奇的人来说，timeago 是一个简洁的小 jQuery 插件，它将时间格式设置为“3 分钟前”，而不仅仅是蹩脚的时间戳。 (甚至SO也使用它)。 It can be found here .