Meteor-Tabular 使用教程

Meteor-Tabular 使用教程

meteor-tabular Reactive datatables for large or small datasets 项目地址: https://gitcode.com/gh_mirrors/me/meteor-tabular

1. 项目介绍

Meteor-Tabular 是一个 Meteor 包，用于在 Meteor 应用中创建高效、响应式的 DataTables。它允许你显示大型集合的内容，而不会影响应用性能。Meteor-Tabular 基于 DataTables 库，提供了许多高级功能，如智能数据订阅、自定义模板、搜索优化等。

2. 项目快速启动

安装 Meteor-Tabular

首先，确保你已经安装了 Meteor。然后，通过以下命令安装 Meteor-Tabular：

meteor add aldeed:tabular

配置 Bootstrap 主题（可选）

如果你使用 Bootstrap 主题，可以通过以下命令安装相关依赖：

npm install --save jquery@1.12.1 datatables.net-bs

然后在客户端 JavaScript 中进行配置：

import { $ } from 'meteor/jquery';
import dataTablesBootstrap from 'datatables.net-bs';
import 'datatables.net-bs/css/dataTables.bootstrap.css';

dataTablesBootstrap(window, $);

定义表格

在公共代码中定义表格（适用于 Node.js 和浏览器）：

import Tabular from 'meteor/aldeed:tabular';
import { Template } from 'meteor/templating';
import moment from 'moment';
import { Meteor } from 'meteor/meteor';
import { Books } from '/collections/Books';

new Tabular.Table({
  name: "Books",
  collection: Books,
  columns: [
    { data: "title", title: "Title" },
    { data: "author", title: "Author" },
    { data: "copies", title: "Copies Available" },
    { 
      data: "lastCheckedOut", 
      title: "Last Checkout", 
      render: function (val, type, doc) {
        if (val instanceof Date) {
          return moment(val).calendar();
        } else {
          return "Never";
        }
      }
    },
    { data: "summary", title: "Summary" },
    { tmpl: Meteor.isClient && Template.bookCheckOutCell }
  ]
});

在模板中引用表格

在模板中引用定义好的表格：

{{> tabular table=TabularTables.Books class="table table-striped table-bordered table-condensed"}}

3. 应用案例和最佳实践

显示部分集合数据

如果你只想显示集合的一部分数据，可以使用 Mongo-style 选择器：

{{> tabular table=TabularTables.Books selector=selector class="table table-striped table-bordered table-condensed"}}

在模板助手函数中定义选择器：

Template.myTemplate.helpers({
  selector() {
    return { author: "Agatha Christie" };
  }
});

自定义搜索行为

你可以通过 search 对象自定义搜索行为：

new Tabular.Table({
  // 其他属性
  search: {
    caseInsensitive: true,
    smart: true,
    onEnterOnly: false
  }
});

使用 Collection Helpers

结合 dburles:collection-helpers 包，可以在表格中调用集合助手函数：

People.helpers({
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
});

在表格定义中引用：

columns: [
  { data: "fullName()", title: "Full Name" }
]

4. 典型生态项目

1. dburles:collection-helpers

用于在 Meteor 集合中定义助手函数，方便在模板和表格中使用。

2. reywood:publish-composite

用于发布复合数据，适合在表格中显示关联数据。

3. meteorhacks:unblock

用于解除 Meteor 发布函数的阻塞，提高性能。

4. alanning:roles

用于角色管理，适合在表格中进行权限控制。

通过这些生态项目的结合使用，可以大大增强 Meteor-Tabular 的功能和灵活性。

meteor-tabular Reactive datatables for large or small datasets 项目地址: https://gitcode.com/gh_mirrors/me/meteor-tabular