如何使用带有ember的制表器?

sy5wg1nm  于 2022-10-20  发布在  其他
关注(0)|答案(1)|浏览(145)

我想用http://tabulator.info/和ember。我不理解文档,也找不到任何关于ember配置的指南。如何从创建一个简单的表开始?

toe95027

toe950271#

查看站点http://tabulator.info/上的示例,制表器似乎只需要一个元素(和一些配置)即可工作。
因此,我们的最终目标是使用一个修饰符,并能够将制表器配置传递给它。
所以,这就是我们最终的结果:

<div {{tabulator someConfig}}></div>

现在,不幸的是,制表器似乎只接受构造函数中的id。因此,我们需要将其动态添加到“显示制表器”中。
首先要做的是安装https://github.com/ember-modifier/ember-modifier(请务必阅读文档,因为这是一件有趣的事情)
然后,在应用程序中创建一个文件app/modifiers/tabulator.js
并使用这些内容:

import Modifier from 'ember-modifier';
import Tabulator from 'tabulator';
import { guidFor }  from '@ember/object/internals';

export default class TabulatorModifier extends Modifier {
  id = guidFor(this);

  get config() {
    return this.args.positional[0];
  }

  didInstall() {
    this.element.id = this.id;
    let config = th

    this.tabulator = new Tabulator(`#${this.id}`, this.config);
  }

}

然后,也许在组件或控制器之类的东西中,你会有这样的东西:

export default class MyComponent extends Component {
  get myConfig() {
    return { ... };
  }
}
<div {{tabulator this.myConfig}}></div>

应该就是这样。您将要在app.CSS中导入CSS

相关问题