最近在项目中使用dwz,在一个页面中用select2做了一个2级级联的下拉框,问题是在查询参数回显的时候特别麻烦,于是想着,能不能页面提交的时候只刷新下面的数据表格,而不刷新查询栏,研究了一下dwz的局部刷新,于是我这样做了。
在页面中写一个div,然后绑定查询按钮的事件,点击查询按钮时刷新这个div。
<span style="font-size:18px;">$("#searchBtn",navTab.getCurrentPanel()).bind("click", function(){
$("#div").loadUrl(url,$("#searchForm").serializeArray(), null);
})</span>
注意:这个请求返回的页面应该包含一个分页form,以及dwz分页div,即:
<!--分页的form-->
<form id="pagerForm" action=url method="post" ></form>
和
<div class="panelBar">
<div class="pages">
<span>显示</span>
<select class="combox" name="numperPage" οnchange="navTabPageBreak({numPerPage:this.value}, 'div')">
<option value="10" <c:if test="${page.numPerPage==10}">selected="selected"</c:if>>10</option>
<option value="20" <c:if test="${page.numPerPage==20}">selected="selected"</c:if>>20</option>
<option value="30" <c:if test="${page.numPerPage==30}">selected="selected"</c:if>>30</option>
<option value="50" <c:if test="${page.numPerPage==50}">selected="selected"</c:if>>50</option>
<option value="100" <c:if test="${page.numPerPage==100}">selected="selected"</c:if>>100</option>
</select>
<span> 条,共${page.totalCount }条</span>
</div>
<!--分页组件-->
<div class="pagination" rel="div" targetType="navTab" totalCount="${page.totalCount }" numPerPage="${page.numPerPage }" pageNumShown="${page.totalPageNum }" currentPage="${page.currentPage }"></div>
上面
navTabPageBreak中的div和下面
rel="div"的div是主页面中要刷新的div的id。
这么做确实实现了数据分页表格刷新而查询栏不刷新,这样就不用管查询条件回显的问题了,但是查询栏在查询的form的外面,提交form的时候查询数据就不能自动一起提交,而如果将查询栏放入查询form里面,则又会被一起刷新,于是我想到两种办法:
1. js监控表单事件,表单改变或者输入后将值赋给form内的hidden表单,缺点是比较繁琐,还不如一起刷新。
2. 修改dwz.ajax.js源码,分页函数中加入寻找查询栏中的表单,根据约定的表单属性以及表单的值在searchForm中生成对应name和value的hidden隐藏域,再提交。缺点是因为可能会影响别的地方,优点是dwz框架中可以通用。
有人给一个好的建议吗?