创建自定义角度智能表

时间:2015-12-03 14:09:00

标签: javascript html angularjs smart-table

这里有点新的(和角度新的)所以对我来说很容易。我试图创建一个漂亮的Angular Smart-Table,它有一些特定的功能:

  • Bootstrap Table
  • 搜索功能
  • 添加到表格功能
  • 以电子表格可压缩格式导出
  • 基于表数据的动态饼图

我能够创建一个简单的表,但是我在使用bootstrap样式和添加上面提到的功能时遇到了问题。如果有人能指出我如何学习这些东西的正确方向,我真的很感激。

1 个答案:

答案 0 :(得分:0)

Smart-table是一个插件,可让您完全控制显示内容和方式。如果需要,您可以使用表格标签,或者您可以选择使用div实现视图。

首先让我们使用智能表查看一个plunker:http://plnkr.co/edit/Idbc1JNHKylHuX6mNwZ6?p=preview

<table st-set-filter="customFilter" st-table="displayed" class="table table-bordered table-striped">

在这里,您可以看到使用bootstrap表显示index.html。此外,您可能会看到内置的基本搜索功能(名字和姓氏)以及一些复杂的过滤器,可让您使用一些比文本搜索更高级的规则进行搜索。

当添加到表格时,在底部添加一个按钮以添加一行,并使用模态对话框输入所需的值。保存时,请确保在控制器中刷新集合,有双向绑定,因此修改集合将反映在您的视图中。

对于导出和图形,重用控制器中的集合,这不是智能表的一部分,你应该找到不同的工具来帮助你。

请注意,如果检索集合是异步操作,则需要使用st-safe-src指令,请在此处查看stSafeSrc标头:http://lorenzofox3.github.io/smart-table-website/#section-basics