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 相关文章推荐
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
微信小程序实现弹框效果
May 26 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 Javascript
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 session处理的定制
2009/03/16 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
不安全的常用的js写法
2009/09/15 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python3基础之基本数据类型概述
2014/08/13 Python
Django实现学生管理系统
2019/02/26 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
pandas针对excel处理的实现
2021/01/15 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
学前班教师的自我鉴定
2013/12/05 职场文书
银行门卫岗位职责
2013/12/29 职场文书
房地产开发项目建议书
2014/05/16 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
检讨书格式
2019/04/25 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android