dwz之局部刷新div

最新推荐文章于 2022-08-05 16:37:16 发布

hellorichen

最新推荐文章于 2022-08-05 16:37:16 发布

阅读量3.1k

点赞数

分类专栏： dwz 网站前台文章标签： dwz 局部刷新

本文链接：https://blog.csdn.net/hellorichen/article/details/78840045

版权

dwz 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

网站前台

7 篇文章 0 订阅

订阅专栏

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>