Question

我为表创建模板时，将使用来自数据库的内容填充它们，因此列数和行数可能会有所不同。到目前为止，这是我的模板：

<!-- T_table.html -->
<template name="T_table">
    <table class="table table-striped table-bordered">
        <thead>
            {{>tableHeader header}}
        </thead>
        <tbody>
            {{>tableRow body}}
        </tbody>
    </table>
</template>

<template name="tableHeader">
    <tr>
        {{#each info}}
            <th>{{header}}</th>
        {{/each}}
    </tr>
</template>

<template name="tableRow">
    {{#each row}}
        <tr>
            {{#each info}}
                <td>{{data}}</td>
            {{/each}}
        </tr>
    {{else}}
        <tr>
            <td class="no-data">No Data</td>
        </tr>
    {{/each}}
</template>


<!-- main.html -->
<template name="main">
    <div class="container">
        {{#each allTables}}
            {{>T_table}}
        {{/each}}
    </div>
</template>


// main.js
Template.main.helpers({
allTables: function () {
var firstTable = {
            header: {
                info: [
                    {
                        header: "ID"
                           },
                    {
                        header: "Name"
                           },
                    {
                        header: "State"
                           },
                    {
                        header: "Started"
                           },
                    {
                        header: "Host"
                           }
                       ]
            },
body: {
    row: [
        {
            info: [
                {data: 99}, {data: "task 0.0:99"}, {data: "FINISHED"}, {data: "12 minutes ago"}, {data: "12 minutes ago"}
                ]
        },
        {
            info: [
                {data: 98}, {data: "task 0.0:98"}, {data: "FINISHED"}, {data: "12 minutes ago"}, {data: "12 minutes ago"}
                ]
        }
    ]
}
            };

    }
    }
return firstTable;
);

这种方法的问题在于填充模板非常复杂，我必须使用三层，每一层都使用一个静态的＆＃34;名字并且不是mongoDB友好。

我想像这样填充该模板：

obj= {
    header: ["ID", "Name", "State", "Started", "Host"],
    body: [{row:[99, "task 0.0:99", "FINISHED", "12 minutes ago", "12 minutes ago"]}, {row:[98, "task 0.0:98", "FINISHED", "12 minutes ago", "12 minutes ago"]}]
}

所以问题是，我该如何解决这个问题？

Answer 1

已经有很好的包显示表格了：

reactive-table - Meteor-native软件包
reactive-datatables - 使用功能强大的Datatables.net库

在开发自己的表格模板之前，您可能需要提前考虑并查看是否需要：

排序
寻呼
过滤
内联编辑
列调整大小或重新排序（最好是持久性）

如果是这样，您可以使用现有的套餐节省大量时间和精力。

如何动态地使用模板创建表

1 个答案: