Angularjs 表格插件的使用
对于相关的table组件可以使用:UI Grid (ng-grid),ng-table,smart table,Angular-Datatables,tablelite,kendo-ui中的grid。相关的介绍可以参考http://zhenghaoju700.blog.163.com/blog/static/135859518201521343938228/
对于一般的项目来说 简单的显示表格用bootstrap的相关插件或者自己写也行,对于分页,我尝试了用smart-tablel这个组件来写的,效果感觉还是不错的。其他的组件本人还没有亲自试验过。嘿嘿...
效果截图:
下面是实现的主要方式:
1.安装
bower install angular-smart-table
2.加入module
angular.module('myApp',['smart-table']
3.HTML
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="birthDate">birth date</th>
<th st-sort="balance">balance</th>
<th>email</th>
</tr>
<tr>
<th>
<input st-search="'firstName'" placeholder="search for firstname" class="input-sm form-control" type="search"/>
</th>
<th colspan="4">
<input st-search placeholder="global search" class="input-sm form-control" type="search"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td>{{row.firstName | uppercase}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate | date}}</td>
<td>{{row.balance | currency}}</td>
<td><a ng-href="mailto:{{row.email}}">email</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
4.JavaScript
app.controller('paginationCtrl', ['$scope', function (scope) {
var
nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'],
familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez']; function createRandomItem() {
var
firstName = nameList[Math.floor(Math.random() * 4)],
lastName = familyName[Math.floor(Math.random() * 4)],
age = Math.floor(Math.random() * 100),
email = firstName + lastName + '@whatever.com',
balance = Math.random() * 3000; return{
firstName: firstName,
lastName: lastName,
age: age,
email: email,
balance: balance
};
} scope.itemsByPage=15; scope.rowCollection = [];
for (var j = 0; j < 200; j++) {
scope.rowCollection.push(createRandomItem());
}
}]);
感觉其实也很简单,我也只是初学,给自己留个备忘吧,还有其他的组件,慢慢学着使用。
Angularjs 表格插件的使用的更多相关文章
- angularJS 常用插件指令
长时间没有登入博客园了,今天突然想了想,当初开这个的目的,其实就是为了记录你当下的一个状态和累计一些问题,所以记录这些还是很有意义,毕竟不是什么牛,靠脸又吃不饱的这个年代,需要留下一些东西给自己看也好 ...
- JQuery表格插件DataTables 当前页合计功能
公司项目表格插件使用的是DataTables,最近添加表合计功能,发现百度统一都是如图类型的代码,不知道是配置问题还是怎么了,在我的页面下根本不能用 var addd=0; $(document).r ...
- [译]MVC网站教程(四):MVC4网站中集成jqGrid表格插件(系列完结)
目录 1. 介绍 2. 软件环境 3. 在运行示例代码之前(源代码 + 示例登陆帐号) 4. jqGrid和AJAX 5. GridSettings 6. ...
- AngularJS常用插件与指令收集
angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...
- Dynatable – 基于 HTML5 & jQuery 的交互表格插件
Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现.Dynatable 的目的是提供一种简单的.可扩展的 API,能够轻松的浏览和操作大规模的 ...
- datatables 前端表格插件 增删改查功能
官方网站:http://datatables.club/example/<!-- DataTables CSS -->css引入的<link rel="stylesheet ...
- 25款顶级的jQuery表格插件
jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...
- 自己写的表格插件autotable
自己写的表格插件autotable 作者:田想兵,个人网址:http://www.lovewebgames.com 这个表格插件所完成的功能是:ajax请求数据,然后动态绑定到指定表格下,格式化,分页 ...
- 推荐几款jQuery表格插件
平时项目中,会碰到很多表格元素,这里推荐几款jQuery表格插件. Stackable.js 通常在小屏幕上,表格的表形形式不大好,因为用户会缩放平移,或者就是表格太小,导致数据不可见.Stackab ...
随机推荐
- python独立环境——virtualenv
安装: pip3 intall virtualenv 创建独立运行环境: 1. 进入项目文件夹根目录 2. 创建环境 Mac:myproject michael$ virtualenv --no- ...
- C/C++ -- Gui编程 -- Qt库的使用 -- 使用自定义类
1.新建空Qt工程 2.新建C++类HelloQt 3.新建ui文件,添加部件,重命名主窗体(对话框)类名HelloQt,构建生成ui头文件 4.修改头文件helloqt.h #ifndef HELL ...
- ES6-Object‘s Extends
依赖文件地址 :https://github.com/chanceLe/ES6-Basic-Syntax/tree/master/js <!DOCTYPE html> <html&g ...
- nginx配置负载均衡,tomcat宕机响应缓慢,自动切换的问题
用了nginx负载均衡后,在两台tomcat正常运行的情况下,访问http://localhost 速度非常迅速,通过测试程序也可以看出是得到的负载均衡的效果,但是我们试验性的把其中一台tomcat( ...
- ASP.NET Core 中的日志记录
目录 内置日志的使用 使用Nlog 集成ELK 参考 内置日志的使用 Logger 是 asp .net core 的内置 service,所以我们就不需要在ConfigureService里面注册了 ...
- [笔记] Python 图片转字符画
一.介绍 用Python 代码完成图片转字符画 二.python 环境 Python 3.6.6 pillow 5.1.0 Python 图像处理库, 需要另外安装 三.原理 gray = 0.21 ...
- Spring配置Quartz任务调度、及 ThreadPool 线程池
ONE.除了引入 Spring 相关的 jar 包,还要引入 Quartz 的 jar 包 <dependency> <groupId>org.springframework& ...
- 快排,归并和Shell排序
快速排序 快速排序的执行流程: (1) 先从数列中取出一个数作为基准数. (2) 将比这个数大的数全放到它的右边,小于或等于它的数全放到它的左边. (3)再对左右区间重复第二步,直到各区间只有一个数. ...
- 解决Tomcat出现内存溢出的问题
Tomcat服务器出现java.lang.OutOfMemoryError:Java heap space异常 1.可能是程序错误,比如:程序陷入死循环 2.堆内存太小 一般情况下,java创建的对象 ...
- c#基础学习(0724)之可变参数、ref和out
params可变参数,无论有几个参数,必须出现在参数列表的最后,可以为可变参数直接传递一个对应类型的数组 #region 可变参数 //1.如果方法有多个参数,可变参数可以作为最后一个参数 //2.可 ...