1.主页面如下
目的:右侧“添加”“删除”后,只刷新右侧
主页面代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript">
</script>
<style>
</style>
<div class="pageContent">
<div class="panelBar">
<ul class="toolBar">
</ul>
</div>
<div id="template" class="unitBox" name="template"
style="float: left; display: block; overflow: auto; width: 510px;">
<div class="pageContent"
style="border-left: 1px #B8D0D6 solid; border-right: 1px #B8D0D6 solid">
<table id="templatetab" class="table" style="width: 99%" layoutH="138">
<thead>
<tr>
<th width="70" align="center">编号</th>
<th width="100" align="center">名称</th>
<th width="70" align="center">是否默认</th>
<th width="70" align="center">人员组</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="item" varStatus="s">
<tr>
<td align="center">${s.count }</td>
<td align="center">${item.title }</td>
<td align="center">
<c:choose>
<c:when test="${item.ifdefault == 1}">
是
</c:when>
<c:otherwise>
否
</c:otherwise>
</c:choose>
</td>
<td align="center">
<a href="#" target="ajax" rel="templateUser" class="link">查看</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<div id="templateUser" class="unitBox" style="margin-left: 520px;">
</div>
</div>
2.点击查看后的后台逻辑
public void showTemplateUser(){
Integer templateId = getParaToInt();
String keywords = getPara("keywords");
Integer pageNumber = getParaToInt("pageNum") != null ? getParaToInt("pageNum") : 1;
Integer pageSize = getParaToInt("numPerPage") != null ? getParaToInt("numPerPage") : 20;
Page<Record> page = tums.getUsersByTid(templateId, keywords, pageNumber, pageSize);
setAttr("page", page);
setAttr("templateId", templateId);
setAttr("keywords", keywords);
render("TemplateUsers.jsp");
}
右侧页面jsp文件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<form id="pagerForm" method="post" action="#">
<input type="hidden" name="roleid" value="${roleid}" />
<input type="hidden" name="pageNum" value="${page.pageNumber}" />
<input type="hidden" name="numPerPage" value="${page.pageSize}" />
<input type="hidden" name="orderField" value="${param.orderField}" />
<input type="hidden" name="keywords" value="${keywords}" />
</form>
<div class="pageHeader">
<form οnsubmit="return divSearch(this,'templateUser');" action="#" method="post">
<div class="searchBar">
<ul class="searchContent">
<li>
<label>用户名/姓名:</label>
<input type="text" name="keywords" value="${keywords}"/>
</li>
<li>
<div class="subBar">
<ul>
<li><div class="buttonActive"><div class="buttonContent"><button type="submit">检索</button></div></div></li>
</ul>
</div>
</li>
</ul>
</div>
</form>
</div>
<div class="pageContent">
<div class="panelBar">
<ul class="toolBar">
<li><a class="add" href="#" target="dialog" width="600" height="500" mask="true"><span>添加</span></a></li>
</ul>
</div>
<table class="table" width="100%" layoutH="180">
<thead>
<tr>
<th width="40" align="center">序号</th>
<th width="60" align="center">姓名</th>
<th width="60" align="center">电话</th>
<th width="70" align="center">操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${page.list}" var="item" varStatus="s">
<tr>
<td align="center">${s.count }</td>
<td align="center"> ${item.name}</td>
<td align="center"> ${item.tel}</td>
<td align="center">
<a title="确定删除该用户吗?" target="ajaxTodo" href="#" class="btnDel" >删除</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="panelBar">
<div class="pages">
<span>每页显示</span>
<select class="combox" name="numPerPage" οnchange="navTabPageBreak({numPerPage:this.value},'templateUser')">
<option value="20" <c:if test="${page.pageSize eq 20 }">selected</c:if>>20</option>
<option value="50" <c:if test="${page.pageSize eq 50 }">selected</c:if>>50</option>
<option value="100" <c:if test="${page.pageSize eq 100 }">selected</c:if>>100</option>
<option value="200" <c:if test="${page.pageSize eq 200 }">selected</c:if>>200</option>
</select>
<span>条,共${page.totalRow}条</span>
</div>
<div class="pagination" targetType="navTab" rel="templateUser" totalCount="${page.totalRow}" numPerPage="${page.pageSize}" pageNumShown="10" currentPage="${page.pageNumber}"></div>
</div>
</div>
3.点击添加后台逻辑及跳转页面
后台逻辑代码
public void addTemplateUser(){
Integer templateId = getParaToInt();
String keywords=getPara("keywords");
Integer pageNumber=getParaToInt("pageNum")!=null?getParaToInt("pageNum"):1;
Integer pageSize=getParaToInt("numPerPage")!=null?getParaToInt("numPerPage"):20;
Page<Record> page = tums.getUsers(keywords, pageNumber, pageSize);
setAttr("templateId", templateId);
setAttr("keywords", keywords);
setAttr("page", page);
render("AddTemplateUser.jsp");
}
页面jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<form id="pagerForm" method="post" action="#" >
<input type="hidden" name="pageNum" value="${page.pageNumber}" />
<input type="hidden" name="numPerPage" value="${page.pageSize}" />
<input type="hidden" name="orderField" value="${param.orderField}" />
<input type="hidden" name="orderDirection" value="${param.orderDirection}" />
<input type="hidden" name="templateId" value="${templateId}" />
</form>
<div class="pageHeader">
<form rel="pagerForm" οnsubmit="return dialogSearch(this);" action="#" method="post">
<div class="searchBar">
<ul class="searchContent">
<li>
<label>用户名/姓名:</label>
<input type="text" name="keywords" value="${keywords}"/>
<button type="submit">检索</button>
</li>
</ul>
</div>
</form>
</div>
<div class="pageContent">
<div class="panelBar">
<a class="button" href="#" rel="ids" target="selectedTodo" targetType="dialog" ><span>确 定</span></a>
</div>
<table class="table" layoutH="112">
<thead>
<tr>
<th width="40"><input type="checkbox" group="ids" class="checkboxCtrl"></th>
<th width="80">序号</th>
<th width="120">姓名</th>
<th width="120">电话</th>
</tr>
</thead>
<tbody>
<c:forEach items="${page.list}" var="item" varStatus="s">
<tr target="template_user" rel="${item.id }">
<td><input name="ids" value="${item.id }" type="checkbox" ></td>
<td>${s.count }</td>
<td>${item.name }</td>
<td>${item.tel}</td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="panelBar">
<div class="pages">
<span>每页显示</span>
<select class="combox" name="numPerPage" οnchange="dialogPageBreak({numPerPage:this.value})">
<option value="20" <c:if test="${page.pageSize eq 20 }">selected</c:if>>20</option>
<option value="50" <c:if test="${page.pageSize eq 50 }">selected</c:if>>50</option>
<option value="100" <c:if test="${page.pageSize eq 100 }">selected</c:if>>100</option>
<option value="200" <c:if test="${page.pageSize eq 200 }">selected</c:if>>200</option>
</select>
<span>条,共${page.totalRow}条</span>
</div>
<div class="pagination" targetType="dialog" totalCount="${page.totalRow}"
numPerPage="${page.pageSize}" pageNumShown="10" currentPage="${page.pageNumber}"></div>
</div>
</div>