动动手,写个knockout的分页模板

时间:2021-12-18 15:00:57

最近一个项目用ASP.NET + knockout开发,很多列表页面都带分页,于是就有了写一个公共的分页模板的想法。

先把template写好:

<script type="text/html" id="PaginationTemplate" >
<div class="pagination" data-bind="visible: pages().length>0">
<div>
<ul>
<li><a data-bind="click:goToFirst" onclick="clickPaging(this)">首页</a></li>
<li><a data-bind="click:goToPrev" onclick="clickPaging(this)" ><<</a></li>
<!--ko if:showStartPagerDot-->
<li><a >...</a></li>
<!--/ko-->
<!--ko foreach:pages-->
<li data-bind="css: { 'active': $data == $parent.currentPage() }">
@*<a data-bind="text: $data, click: $parent.goToPage.bind($data, $data)" onclick="clickPaging(this)"></a>*@
<a data-bind="text: $data, click: $parent.goToPage.bind($data, $data),style:{'background-color':$('.pagination a').length=='5'?'#CE9E00':'#194DB0'}" onclick="clickPaging(this)"></a>
</li>
<!--/ko-->
<!--ko if:showEndPagerDot-->
<li><a>...</a></li>
<!--/ko-->
<li><a data-bind="click: goToNext" onclick="clickPaging(this)">>></a></li>
<li><a data-bind="click:goToLast" onclick="clickPaging(this)">末页</a></li>
</ul>
<ul>
<li><span >跳转</span></li>
<li>
<input type="text" class="h_20 w_30 txtStl1 mg_t_neg2 " id="pagex" data-bind="value:jumpPage"/>
</li>
<li>
<span data-bind="click: jump" onclick="clickPaging(this)">
@*<button class="btnStl1" type="button" data-bind="click: jump">确定</button></span>*@确定</span> </li>
<li><span data-bind="text: formatedPageCount"></span></li>
</ul>
</div>
<div class="clear"></div>
</div> </script>

接下来就是写knockout的视图模型了:

function paginationViewModel(pageSize, goToPageHandler) {
var self = this, pagerCount = 8;//如果分页的页面太多,截取部分页面进行显示,默认设置显示9个页面
self.pageSize = pageSize;//每页显示的记录数
self.currentPage = ko.observable(1);//当前页面Index
self.jumpPage = ko.observable(1);//需要跳转的页面的Index
self.pageCount = ko.observable(0);//总页数
self.showStartPagerDot = ko.observable(false);//页面开始部分是否显示点号
self.showEndPagerDot = ko.observable(false);//页面结束部分是否显示点号
self.pages = ko.observable([]);//需要显示的页面数量
//计算需要显示的页面的页码
self.caculatePages = function () {
var result = [], pagerCount = 8, start = 1, end = pagerCount;
if (self.currentPage() >= pagerCount) {
start = self.currentPage() - Math.floor(pagerCount / 2);
self.showStartPagerDot(true);
} else {
self.showStartPagerDot(false);
};
end = start + pagerCount - 1;
if (end > self.pageCount()) {
end = self.pageCount();
self.showEndPagerDot(false);
} else {
self.showEndPagerDot(true);
}; for (var i = start; i <= end; i++) {
result.push(i);
};
self.pages(result);
}
//总页数
self.formatedPageCount = ko.computed(function () {
return "共" + self.pageCount() + "页";
});
//页面跳转
self.goToPageHandler = goToPageHandler;
self.goToPage = function (page) {
if (typeof self.goToPageHandler == "function") {
self.goToPageHandler.call(self, page - 1, function (data) {
self.pageCount(Math.ceil(data.count / self.pageSize));
self.currentPage(page);
self.jumpPage(null);
self.caculatePages();
}); };
};
//回到首页
self.goToFirst = function () {
self.goToPage(1);
};
//跳转到最后一页
self.goToLast = function () {
self.goToPage(self.pageCount());
};
//上一页
self.goToPrev = function () {
var cur = self.currentPage();
if (cur > 1) {
self.goToPage(cur - 1);
};
};
//下一页
self.goToNext = function () {
var cur = self.currentPage();
if (cur < self.pageCount()) {
self.goToPage(cur + 1);
};
};
//跳转
self.jump = function () {
var page = self.jumpPage();
if (page > 0 && page <= self.pageCount()) {
self.goToPage(page);
};
};
};

然后直接用列表页面的viewModel继承这个视图模型:

paginationViewModel.apply(self, [10, function (page, pageHandler) {
ajaxQueue.Request("UserQuaList", {
url: self.baseUri,
data:{
userName:self.userName()||"",
quaName:self.quaName()||"",
pageIndex:page,
pageSize:self.pageSize
},
success: function (data) {
pageHandler.call(self, data);
self.userQuas($.map(data.list || [], function (r) { return new userQuaModel(r); }));
}
}).Run();
}]);

页面上分页部分用template绑定:

<td colspan="5" data-bind="template: 'PaginationTemplate'"></td>

大功告成!,试了一下,还不错,以后还可以再加点效果上去。

应大家要求,整了一个Demo源代码:

例子源代码