0 0

关于整合DWZ UI界面的 分页问题 请教熟识的大神指导10

本人通过struts2 spring ibatis 制作了一个简单的任务管理系统 然后想把它整合到DWZ的UI界面上。
主要只涉及到2个文件一个是
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
	<meta http-equiv="pragma" content="no-cache" />  
	<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />  
	<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />  
	<meta http-equiv="expires" content="0" />  
<title>任务管理系统</title>
<link rel="stylesheet" href="js/scheduler/codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="js/scheduler/codebase/ext/dhtmlxscheduler_ext.css" type="text/css" media="screen" title="no title" charset="utf-8" />

<link href="js/edo/res/css/edo-all.css" rel="stylesheet" type="text/css"  />
<link href="themes/default/style.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="themes/css/core.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="themes/css/print.css" rel="stylesheet" type="text/css" media="print"/>
<link href="uploadify/css/uploadify.css" rel="stylesheet" type="text/css" media="screen"/>

<!--[if IE]>
<link href="themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/>
<![endif]-->

<script src="js/speedup.js" type="text/javascript"></script>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.bgiframe.js" type="text/javascript"></script>
<script src="xheditor/xheditor-1.1.12-zh-cn.min.js" type="text/javascript"></script>
<script src="uploadify/scripts/swfobject.js" type="text/javascript"></script>
<script src="uploadify/scripts/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="My97DatePickerBeta/My97DatePicker/WdatePicker.js"></script>
<script src="js/dwz.core.js" type="text/javascript"></script>
<script src="js/dwz.util.date.js" type="text/javascript"></script>
<script src="js/dwz.validate.method.js" type="text/javascript"></script>
<script src="js/dwz.regional.zh.js" type="text/javascript"></script>
<script src="js/dwz.barDrag.js" type="text/javascript"></script>
<script src="js/dwz.drag.js" type="text/javascript"></script>
<script src="js/dwz.tree.js" type="text/javascript"></script>
<script src="js/dwz.accordion.js" type="text/javascript"></script>
<script src="js/dwz.ui.js" type="text/javascript"></script>
<script src="js/dwz.theme.js" type="text/javascript"></script>
<script src="js/dwz.switchEnv.js" type="text/javascript"></script>
<script src="js/dwz.alertMsg.js" type="text/javascript"></script>
<script src="js/dwz.contextmenu.js" type="text/javascript"></script>
<script src="js/dwz.navTab.js" type="text/javascript"></script>
<script src="js/dwz.tab.js" type="text/javascript"></script>
<script src="js/dwz.resize.js" type="text/javascript"></script>
<script src="js/dwz.dialog.js" type="text/javascript"></script>
<script src="js/dwz.dialogDrag.js" type="text/javascript"></script>
<script src="js/dwz.sortDrag.js" type="text/javascript"></script>
<script src="js/dwz.cssTable.js" type="text/javascript"></script>
<script src="js/dwz.stable.js" type="text/javascript"></script>
<script src="js/dwz.taskBar.js" type="text/javascript"></script>
<script src="js/dwz.ajax.js" type="text/javascript"></script>
<script src="js/dwz.pagination.js" type="text/javascript"></script>
<script src="js/dwz.database.js" type="text/javascript"></script>
<script src="js/dwz.datepicker.js" type="text/javascript"></script>
<script src="js/dwz.effects.js" type="text/javascript"></script>
<script src="js/dwz.panel.js" type="text/javascript"></script>
<script src="js/dwz.checkbox.js" type="text/javascript"></script>
<script src="js/dwz.history.js" type="text/javascript"></script>
<script src="js/dwz.combox.js" type="text/javascript"></script>
<script src="js/dwz.print.js" type="text/javascript"></script>
<!--
<script src="bin/dwz.min.js" type="text/javascript"></script>
-->
<script src="js/dwz.regional.zh.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
	DWZ.init("dwz.frag.xml", {
		loginUrl:"login_dialog.html", loginTitle:"登录",	// 弹出登录对话框
//		loginUrl:"login.html",	// 跳到登录页面
		statusCode:{ok:200, error:300, timeout:301}, //【可选】
		pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可选】
		debug:false,	// 调试模式 【true|false】
		callback:function(){
			initEnv();
			$("#themeList").theme({themeBase:"themes"}); // themeBase 相对于index页面的主题base路径
		}
	});
});
</script>
<script src="js/scheduler/codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<script src="js/scheduler/codebase/ext/dhtmlxscheduler_editors.js" type="text/javascript" charset="utf-8"></script>
<script src="js/scheduler/codebase/locale_cn.js" type="text/javascript" charset="utf-8"></script>
<script src="js/scheduler/codebase/locale_recurring_cn.js" type="text/javascript" charset="utf-8"></script>
<script src="js/scheduler/codebase/ext/dhtmlxscheduler_minical.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/edo/edo.js"></script>	

<style type="text/css" media="screen">
html,body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	overflow: hidden;
}
</style>

</head>


<body scroll="no">
	<div id="layout">
		<div id="header">
			<div class="headerNav">
				<a class="logo" href="http://j-ui.com">标志</a>
				<ul class="nav">
					<li id="switchEnvBox"><a href="javascript:">(<span>武汉</span>)切换城市</a>
						<ul>
							<li><a href="sidebar_1.html">武汉</a></li>
							<li><a href="sidebar_2.html">上海</a></li>
							<li><a href="sidebar_2.html">南京</a></li>
							<li><a href="sidebar_2.html">深圳</a></li>
							<li><a href="sidebar_2.html">广州</a></li>
							<li><a href="sidebar_2.html">天津</a></li>
							<li><a href="sidebar_2.html">杭州</a></li>
						</ul>
					</li>
					<li><a href="https://me.alipay.com/dwzteam" target="_blank">捐赠</a></li>
					<li><a href="changepwd.html" target="dialog" width="600">设置</a></li>
					<li><a href="http://www.cnblogs.com/dwzjs" target="_blank">博客</a></li>
					<li><a href="http://weibo.com/dwzui" target="_blank">微博</a></li>
					<li><a href="http://bbs.dwzjs.com" target="_blank">论坛</a></li>
					<li><a href="login.html">退出</a></li>
				</ul>
				<ul class="themeList" id="themeList">
					<li theme="default"><div class="selected">蓝色</div></li>
					<li theme="green"><div>绿色</div></li>
					<!--<li theme="red"><div>红色</div></li>-->
					<li theme="purple"><div>紫色</div></li>
					<li theme="silver"><div>银色</div></li>
					<li theme="azure"><div>天蓝</div></li>
				</ul>
			</div>

			<!-- navMenu -->
			
		</div>

		<div id="leftside">
			<div id="sidebar_s">
				<div class="collapse">
					<div class="toggleCollapse"><div></div></div>
				</div>
			</div>
			<div id="sidebar">
				<div class="toggleCollapse"><h2>主菜单</h2><div>收缩</div></div>

				<div class="accordion" fillSpace="sidebar">
					<div class="accordionHeader">
						<h2><span>Folder</span>界面组件</h2>
					</div>
					<div class="accordionContent">
						<ul class="tree treeFolder">
							<li><a href="tabsPage.html" target="navTab">主框架面板</a>
								<ul>
									<li><a href="main.html" target="navTab" rel="main">我的主页</a></li>
									<li><a href="findAllTaskUI.action" target="navTab" rel="page2">search界面</a></li>
									<li><a href="scheduler.jsp" target="navTab" rel="external" external="true">日程表</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div id="container">
			<div id="navTab" class="tabsPage">
				<div class="tabsPageHeader">
					<div class="tabsPageHeaderContent"><!-- 显示左右控制时添加 class="tabsPageHeaderMargin" -->
						<ul class="navTab-tab">
							<li tabid="main" class="main"><a href="javascript:;"><span><span class="home_icon">我的主页</span></span></a></li>
						</ul>
					</div>
					<div class="tabsLeft">left</div><!-- 禁用只需要添加一个样式 class="tabsLeft tabsLeftDisabled" -->
					<div class="tabsRight">right</div><!-- 禁用只需要添加一个样式 class="tabsRight tabsRightDisabled" -->
					<div class="tabsMore">more</div>
				</div>
				<ul class="tabsMoreList">
					<li><a href="javascript:;">我的主页</a></li>
				</ul>
				<div class="navTab-panel tabsPageContent layoutBox">
					<div class="page unitBox" id="jbsxBox">

					</div>
					
				</div>
			</div>
		</div>

	</div>

	<div id="footer">Copyright &copy; 2010 <a href="demo_page2.html" target="dialog">DWZ团队</a> Tel:010-52897073</div>
</body>
</html>



另外一个是涉及到我要分页的search.jsp的查询页面:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<form id="pagerForm" method="post" action="findAllTaskUI.action">
<input type="hidden" name="pageNum" value="1" />
<input type="hidden" name="numPerPage" value="10" />
<input type="hidden" name="orderField" value="${param.orderField}" />
<input type="hidden" name="orderDirection" value="${param.orderDirection}" />
</form>

<div class="pageHeader">
	<div class="searchBar">
		<table class="searchContent">
			<tr>
			<td>
				<form action="findTaskByTitle" method="post" theme="simple" onsubmit="return navTabSearch(this)" rel="pagerForm">
					任务标题:<input type="text" name="title" />
				<input type="submit" value="search">
				</form>
				</td>
				<td>
				状态:<form action="findTaskByState" method="post" theme="simple" onsubmit="return navTabSearch(this)" rel="pagerForm">					
					<select class="combox" name="state">
						<option value="finished">完成</option>
						<option value="unfinished">未完成</option>
						<option value="unstart">未开始</option>
					</select>
					<input type="submit" value="search">
				</form>
				</td>
				<td>
				<form action="findTaskByDetails" method="post" theme="simple" onsubmit="return navTabSearch(this)" >
					任务细节:<input type="text" name="details" />
				<input type="submit" value="search">
				</form>
				</td>
				<td>
				<form action="findTaskByDate" method="post" theme="simple" onsubmit="return navTabSearch(this)" >
					开始日期:<input type="text"  readonly="true" name="startTime" id="d241" onfocus="WdatePicker({dateFmt:'yyyy-M-dd'})" class="Wdate"/>
					结束日期:<input type="text"  readonly="true" name="endTime" id="d241" onfocus="WdatePicker({dateFmt:'yyyy-M-dd'})" class="Wdate"/>
				<input type="submit" value="search">
				</form>
				</td>
			</tr>
		</table>
	</div>
</div>
<div class="pageContent" >
	<table class="table" width="100%" asc="asc" targetType="navTab" desc="desc" layoutH="138">
		<thead>
			<tr>
				<th  align="center">任务标题</th>
				<th  align="center">任务细节</th>
				<th  align="center" orderField="state" class="asc">任务状态</th>
				<th  align="center" orderField="pc" class="desc">任务完成百分比</th>
				<th  align="center">开始日期</th>
				<th  align="center">结束日期</th>
<!-- 				<th  align="center">删除</th>			   -->
<!--  				<th  align="center">编辑</th>            -->
			</tr>
		</thead>
		<tbody>
			<s:iterator value="list" >
                <tr>
                    <td align="center">
                        <s:property value="text"/> 
                    </td>
                    <td align="center">
                        <s:property value="details"/> 
                    </td>
                    <td align="center">
                        <s:property value="state"/> 
                    </td>
                    <td align="center">
                        <s:property value="pc"/> 
                    </td>
                    <td align="center">
                        <s:property value="startTime"/> 
                    </td>
                    <td align="center">
                        <s:property value="endTime"/> 
                    </td>
<!--    			<td align="center">   
	            <s:url id="delete" action="delUI">   
	               <s:param name="id">   
	               <s:property value="id" />   
	               </s:param>   
	            </s:url>    
	            <s:a href="%{delete}">delete</s:a>   
	            </td>
 	                			<td align="center">
    				<s:url id="update" action="edit">
    					<s:param name="id">
    						<s:property value="id"/>
    					</s:param>
    				</s:url>
    				<s:a href="%{update}">update</s:a>
    			</td>               -->
                    </tr>
           	 </s:iterator>
		</tbody>
			</table>

	<div class="panelBar">
		<div class="pages">
			<span>显示</span>
			<select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value},'jbsxBox')">
				<option value="10">10</option>
				<option value="50">50</option>
				<option value="100">100</option>
				<option value="200">200</option>
			</select>
		</div>
		
		<div class="pagination" targetType="navTab" totalCount="200" numPerPage="10" pageNumShown="10" currentPage="1" rel="jbsxBox"></div>

	</div>
</div>


其中我有几个action都是查询的方法,但是我通过查询出来的结果 总是并没有分页,而是全部显示在一个页面上,然后可以通过下拉条拖动,并没有按照我一个页面只显示10条的规则执行。请各位大神帮我看看,如何解决分页问题,万分感谢。
2012年5月11日 11:04

1个答案 按时间排序 按投票排序

0 0

这个你看看你后台、取出来的值分页了没有!!!
    DWZ的分页并不是你一次性把所有的数据查询出就给你分页的!
它也是点击一下查询一页而已!!!

2012年7月20日 11:46

相关推荐

    dwz .net 简单分页 表头排序、查询

    以上内容涵盖了DWZ.NET中关于分页、表头排序和查询的基本实现方法。实际开发中,还需要考虑性能优化、异常处理、用户体验等方面,确保功能的稳定性和易用性。通过研究和理解提供的示例代码,你可以更深入地掌握这些...

    DWZ框架的分页实例

    2、下载实例后,修改文件中的数据库连接、sql语句以及table显示内容,然后放到dwz框架当中,即可实现分页效果。 3、“分页思路服务器返回当前页的数据,总条数,再由js来生成分页标签。分页是配合服务器端来处理的, ...

    dwz - 简单实用国产jQuery UI框架 - DWZ富客户端框架(jUI)

    DWZ(Design What You Want)是一款基于jQuery的国产富客户端框架,主要针对Web应用的界面设计和交互体验,被称作“jUI”。这个框架旨在简化网页开发过程,提供了一系列组件和工具,使得开发者能够快速构建功能丰富...

    dwz的分页查询等

    综上所述,“dwz的分页查询等”涵盖了DWZ框架在数据处理、页面交互、UI设计等多个方面的应用,体现了其在构建高效、易用的Web应用中的价值。开发者可以通过深入学习和实践DWZ,提升项目的开发效率和质量。

    国产的UI,DWZ

    【标题】:“国产的UI,DWZ” 指的是DWZ UI框架,这是一个由国内开发者创建的前端应用开发框架,旨在提供类似EXT.js的高效、易用的用户界面解决方案。 【描述】:“类似EXT,是国人开发的首选哦” 这句话表明DWZ UI...

    dwzteam_dwz_jui_maste

    "dwzteam_dwz_jui_maste"是一个与前端开发相关的项目,主要涉及DWZ团队的DWZ UI框架。DWZ UI是一个广泛使用的JavaScript和CSS框架,专为构建响应式和交互式的Web应用程序而设计。这个项目的名称暗示了它是DWZ UI的一...

    Dwz table 分页排序视频

    Dwz,全称Dynamic Web Zone,是一款基于jQuery的前端UI库,它提供了丰富的组件,包括表格(table)功能,支持数据的分页和排序,以优化用户体验并提高网页性能。下面我们将深入探讨Dwz table的分页与排序实现。 **1...

    通过自定义标签,简化dwz table分页

    在DWZ(Dynamic Web Zui)框架中,分页功能是网页数据展示的重要部分,它帮助用户方便地浏览大量信息。然而,原始的DWZ分页配置可能较为复杂,涉及多行HTML代码和JavaScript设置。为了解决这个问题,开发者经常采用...

    dwz jquery 后台界面框架

    DWZ jQuery 后台界面框架是一款专为Web应用设计的高效、易用的前端开发框架。它基于jQuery库,提供了一系列完整的后台管理界面组件,包括布局、表单、表格、弹窗、导航等,旨在帮助开发者快速构建出美观且功能丰富的...

    dwz-ria-1.4.6.版本本地演示资源包

    DWZ UI 是一款基于 jQuery 的前端用户界面框架,专门用于构建富互联网应用程序(RIA,Rich Internet Applications)。在“dwz-ria-1.4.6 版本本地演示资源包”中,我们可以深入理解 DWZ UI 的核心特性和最新改进。 ...

    dwz开源web界面框架

    •通读DWZ文档,很多新手提的问题文档中都写了 •看demo每个组件演示效果和代码(留意组件html结构) •建议安装firebug,用firebug看html结构、CSS和调试JS都非常方便。见附录一 firebug介绍 •对于初学者不建议看...

    dwzteam-dwz_jui-master

    通过访问提供的网址,用户可以找到更多关于DWZ UI的信息,包括文档、示例和社区支持。这个框架旨在简化Web开发过程,让开发者能够快速构建功能丰富的交互式页面,而无需过多关注前端细节。 【标签】"dwz开源文件...

    SpringMVC+Mybatis+DWZ整合例子(参考)

    1:SpringMVC+Mybatis+DWZ+Orcale整合 2:Oracle数据库账户Scott 密码123 自己根据实际情况修改 3:表在数据库里 4:只有”我的测试“一个可用,其余没做,错误页处理不完全,我注释了! 5:默认有登陆页面,账号密码...

    DWZ+ThinkPHP+kindeditor整合,及DWZ官方整合部分小BUG修复

    首先非常感谢DWZ官方整合了DWZ+ThinkPHP,方便我们PHPer的开发,DWZ的后台框架非常好用。 其次,本人在 DWZ官方 整合的基础上做了些修改,而且经测试完全可用,现在本人在此基础上开发项目。 修改的内容如下: 1、...

    j-ui dwz 好文件

    标题中的“j-ui dwz 好文件”很可能是指基于Java开发的一款名为“j-ui”的用户界面框架,其中“dwz”可能是该框架的一个特定版本或者一个子项目名称。DWZ全称可能为“Design Without Z-index”,它可能是一个专为...

    开源框架DWZ与ASP.NET MVC3的整合应用

    可能包含了关于如何整合DWZ与ASP.NET MVC3的具体步骤、示例代码和实践案例,例如“1.pdf”可能详细讲解了整合的准备工作,“2.pdf”可能介绍了如何在视图中使用DWZ组件,“3.pdf”可能涉及服务器端的MVC3控制器实现...

    dwz,ztree整合,操作都在头部

    在IT行业中,DWZ和ZTree是两个非常实用的JavaScript框架,主要用于构建Web应用程序的界面和数据管理。这里我们详细探讨这两个工具的整合以及“操作都在头部”的实现方式。 DWZ(Design Without ZIndex)是一个基于...

    dwz分页,asp文件示例

    dwz分页,asp文件示例

    简单实用国产jQuery UI框架 - DWZ富客户端框架DWZ RIA 1.4.4 (20121016 修正了横向导航js报错问题)

    DWZ RIA 1.4.4 (20121016 修正了横向导航js报错问题) 修复使用xheditor插件IE下兼容问题:IE下打开一个含有编辑器的页面,然后关闭,再打开不能录入问题 修复多文件上传插件uploadify 的html扩展方式,java读取不...

    springmvc+mybatis+dwz整合

    DWZ包括表格、下拉框、按钮、对话框等常用UI元素,使得Web应用具有良好的用户体验。在本项目中,DWZ版本为1.5.3,可以与SpringMVC和MyBatis后端完美融合,实现前后端的交互。 整合这三个框架的过程通常包括以下几个...

Global site tag (gtag.js) - Google Analytics