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 相关文章推荐
javascript 函数使用说明
Apr 07 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 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 时间日期操作实战
2011/08/26 PHP
PHP循环结构实例讲解
2014/02/10 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
PHP反向代理类代码
2014/08/15 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
详解node.js 事件循环
2020/07/22 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Python unittest单元测试框架总结
2018/09/08 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
Python Json数据文件操作原理解析
2020/05/09 Python
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
高中生自我评价个人范文
2013/11/09 职场文书
培训演讲稿范文
2014/01/12 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
装修设计师求职信
2014/02/26 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
PHP基本语法
2021/03/31 PHP
如何在python中实现ECDSA你知道吗
2021/11/23 Python