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挂钩内）：

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

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

1 个答案: