DWZ table的原生分页浅谈


Posted in Javascript onMarch 01, 2013

最近在项目开发当中很少会用到DWZ原生的table分页,往往是使用jqgrid or grid这种第三方数据绑定的表格插件,如今在项目中要求了,就必须要使用DWZ自带的table了

接下来看一段代码,我会给大家详细介绍DWZ中table分页的使用方式,以下是在MVC中实现的方式。

?<div class="pagination" targetType="navTab" totalCount="@ViewBag.totalCount" numPerPage="@ViewBag.numPerPage" pageNumShown="@ViewBag.pageNumShown" <BR>currentPage="@ViewBag.currentPage"></div>
 属性介绍

targetType:绑定方式,DWZ这里提供了"navTab" and "dialog"这两种方式,顾名思义就是分页是在标签页上还是弹出层上

totalCount:数据总行数

numPerPage:当前页数据行数

pageNumShown:总页数

currentPage:当前页码

@using (Html.BeginForm("BidPrjList", "TbUnify", null, FormMethod.Post, new { id = "pagerForm" }))
{
    <input type="hidden" name="pageNum" value="1" />
    <input type="hidden" name="numPerPage" value="@ViewBag.numPerPage" />
}

注意DWZ下分页的表单必须加上id="pagerForm"属性,否则不会执行。DWZ中表格的分页实质是将分页的方式以表单提交的形式传递至后台,由后台接收参数,获取分页信息:例如:
Request.Form["numPerPage"]

获取分页信息表单的值就是你在View中pagerForm表单下定义隐藏文本域的name,在后台接收后去请求数据源中分页后的数据,再返回至前台。

而这里存在一个小问题:首次进入此页面时,是无法触发当前分页的的表单提交事件的,所以在上面我定义了ViewBag.numPerPage动态赋值,每页分取多少条数据,前台界面只是将分页样式定义,实质数据没有绑定,所以必须要将前台传递过来的分页信息作为后台数据分页的依据,这样前台的分页才能与数据对接一致,不会造成错乱,这点要注意。

在实际项目的开发当中,我们总会把表格与过滤条件放在一起,DWZ中表格传入限制条件的方式也很简单,如上在分页表单上加入需要传入的隐藏文本域例如:

<input type="hidden" name = "Common_TbUnify_BidPrjList_HtxtPrjName" />

这样在后台就能够接受到传入的过滤条件了。

DWZ 的table分页实质是将当前标签页的数据reload,致使标签页刷新,若限制条件与分页共同使用时,这样就会存在一个问题,页面reload后会使你 的过滤条件丢失,而这里我解决的办法还是在分页的表单中加入隐藏文本域,每次把过滤条件赋值,在后台判断是否为空,是否加入过滤条件,希望大家能够注意这 点。

最后再说一点,在上面介绍了targetType,表示当前分页的方式与分页实质是标 签页的刷新,所以如果我们把包含table的View层作为部分页用异步去进行加载时,就会发现,DWZ的分页控件是不会显示的,也就无法分页,在上面已 经告诉大家每次分页是要指定type的,如果使用$.load或者@Html.Partial都是只能加载出第一页的数据,这也是DWZ中存在缺陷的地方吧,毕竟DWZ的兴起也是近年,还是存在很多问题与BUG的,尤其是他的table分页与数据绑定真心不好用,但是总体来说,DWZ其他组件与样式还是很不错的。

好了关于DWZ table分页今天就介绍到这里。

Javascript 相关文章推荐
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
vue.js的提示组件
Mar 02 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 #Javascript
循环 vs 递归浅谈
Feb 28 #Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 #Javascript
jquery显示和隐藏div特效实例
Feb 27 #Javascript
JS等比例缩小图片尺寸的实例
Feb 27 #Javascript
JQuery切换显示的效果实例代码
Feb 27 #Javascript
innerText和textContent对比及使用介绍
Feb 27 #Javascript
You might like
PHP初学入门
2006/11/19 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
js如何取消事件冒泡
2013/09/23 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python刷投票的脚本实现代码
2014/11/08 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
python序列化与数据持久化实例详解
2019/12/20 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
敬老文明号事迹材料
2014/01/16 职场文书
九年级科学教学反思
2014/01/29 职场文书
就业表自我评价分享
2014/02/06 职场文书
机电一体化求职信
2014/03/10 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
Vue h函数的使用详解
2022/02/18 Vue.js
Java的Object类的九种方法
2022/04/13 Java/Android