AngularJs创建自己的Grid

我把这个组件命名为tm.pagination,原因是因为起名真的太难起了。而且我网名也叫天名, TM就这样了吧。github地址https://github.com/miaoyaoyao/AngularJs-UI

分页在线查看

点击预览

http://demo.miaoyueyue.com/js/ng/AngularJs-UI/demo/pagination.html

分页兼容性

对不起，我不会去测试老掉牙的ie8浏览器。目前测试了ie9,chrome,firefox，有任何问题，联系我。

基本使用方法

整个分页直接参考如下：

<!doctype html>

<head>

<style>

.page-list .pagination {float:left;}

.page-list .pagination span {cursor: pointer;}

.page-list .pagination .separate span{cursor: default; border-top:none;border-bottom:none;}

.page-list .pagination .separate span:hover {background: none;}

.page-list .page-total {float:left; margin: 25px 20px;}

.page-list .page-total input, .page-list .page-total select{height: 26px; border: 1px solid #ddd;}

.page-list .page-total input {width: 40px; padding-left:3px;}

.page-list .page-total select {width: 50px;}

</style>

</head>

<tm-pagination conf="paginationConf"></tm-pagination>

angular.module('myApp', ['tm.pagination']).controller('testController', function($scope){

/**

* I'm not good at English, wish you you catch what I said And help me improve my English.

* A lightweight and useful pagination directive

* conf is a object, it has attributes like below:

* currentPage: Current page number, default 1

* totalItems: Total number of items in all pages

* itemsPerPage: number of items per page, default 15

* onChange: when the pagination is change, it will excute the function.

* pagesLength: number for pagination size, default 9

* perPageOptions: defind select how many items in a page, default [10, 15, 20, 30, 50]

* rememberPerPage: use to remember how many items in a page select by user.

$scope.paginationConf = {

currentPage: 1,

totalItems: 8000,

itemsPerPage: 15,

pagesLength: 15,

perPageOptions: [10, 20, 30, 40, 50],

rememberPerPage: 'perPageItems',

onChange: function(){

}

};

})

</script>

</body>

</html>

常用方法

对象中的属性也很简单

totalItems 总共有多少条记录（不用说了吧）
currentPage 当前所在的页（…默认第1页）
itemsPerPage 每页展示的数据条数（…默认15条）

几个特殊的重点说明一下：

pagesLength 分页条目的长度（如果设置建议设置为奇数）

下面分别是设置为9和15分别的效果

perPageOptions 可选择显示条数的数组

默认显示的时候是这样

你可以通过perPageOptions = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

把他变成这样的。（可能你也看到了一个问题，为什么我们的数据中没有15，而这里多出一个15，原因是我们itemsPerPage = 15;设置为15了，如果你改成20，就不会有些问题了，程序很智能的帮你解决判断了）

rememberPerPage 使用LocalStorage记住所选择的条目数的名称

这是我独家提供的功能，只此一家，别无分店，目前还没有看到有类似提供的。

这是说起来有点难理解，但其实很有用。

我说一个现实使用的例子来说，如果我们在768px的高度去做一个程序，可能看显示15条就占满整个屏幕了，你觉得这也很好，就设置为默认15条，但是如果有人用1080px的高度去看这个呢，可能底下会有大部空白。那他可能更希望每日展示20条数据。我们上面提供了一个每页展示多少条数据的，他自然可以选择每页展示20条。这很好，不是吗？但是，如果他下次再来访问这个，他是不是还要再选择一下显示20条呢？这样就不太方便，为何不为它记录了，他就是喜欢用20条来显示呢。所以这就是我提供这个的由来。

简单的来说rememberPerPage = ‘perPageItems’; 这个我会在本地存储中添加perPageItems变量，并存入相关值到本地存储中去。然后再拿出来。就实现了记录功能了。你喜欢15条，他喜欢20条，大家各爱各的，都很完美。

文章来源 http://www.miaoyueyue.com/archives/813.html