dwz之局部刷新div

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  onsubmit="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" onchange="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" onsubmit="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" onchange="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>