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

andy88421 2012-05-11 10:29:00
本人通过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 © 2010 <a href="demo_page2.html" target="dialog">DWZ团队</a> Tel:010-52897073</div>
</body>
</html>


另外一个search.jsp 文件请看下楼
...全文
603 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
postxx 2012-07-29
  • 打赏
  • 举报
回复
大侠们 我想 问一下你们的表头排序都是怎么做的呀
<th align="center" orderField="state" class="asc">任务状态</th>
<th align="center" orderField="pc" class="desc">任务完成百分比</th>
查询后 怎样改变 class 的值
andy88421 2012-05-11
  • 打赏
  • 举报
回复
另外一个是涉及到我要分页的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条的规则执行。请各位大神帮我看看,如何解决分页问题,万分感谢。
joe_xu2009 2012-05-11
  • 打赏
  • 举报
回复
J-UI分页需要你设置一个表单pagerForm,表单里是分页的具体代码
<form id="pagerForm" action="" method="post">
<input type="hidden" name="pageNum" value="1"/>
<input type="hidden" name="numPerPage" value="{$numPerPage}" />
<input type="hidden" name="orderField" value="{$Think.request.orderField}"/>
<input type="hidden" name="orderDirection" value="{$Think.request.orderDirection}"/>
</form>
joe_xu2009 2012-05-11
  • 打赏
  • 举报
回复
在页面上增加一个表单,表单里写上你程序计算的总行数,每页显示的数目,我的代码(THINKPHP版)的

分页参数
<form id="pagerForm" action="" method="post">
<input type="hidden" name="pageNum" value="1"/>
<input type="hidden" name="numPerPage" value="{$numPerPage}" />
<input type="hidden" name="orderField" value="{$Think.request.orderField}"/>
<input type="hidden" name="orderDirection" value="{$Think.request.orderDirection}"/>
</form>

实现分页代码
<div class="panelBar">
<div class="pages">
<span>{$Think.lang.show}</span>
<select class="combox" name="numPerPage" onChange="navTabPageBreak({numPerPage:this.value})">
<option value="10" <eq name='numPerPage' value='10'>selected</eq> >10</option>
<option value="20" <eq name='numPerPage' value='20'>selected</eq> >20</option>
<option value="25" <eq name='numPerPage' value='25'>selected</eq> >25</option>
<option value="50" <eq name='numPerPage' value='50'>selected</eq> >50</option>
<option value="100" <eq name='numPerPage' value='100'>selected</eq> >100</option>
<option value="200" <eq name='numPerPage' value='200'>selected</eq> >200</option>
</select>
<span>共 <em class="num">{$totalCount}</em> 行记录,共<em class="num">{$totalPage}</em> 页</span>
</div>
<div class="pagination" targetType="navTab" totalCount="{$totalCount}" numPerPage="{$numPerPage}" pageNumShown="{$Think.config.page_rollpage}" currentPage="{$currentPage}"></div>
</div>


81,090

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧