DWZ是一个前端的富客户端框架,网上找的资料和API比较少,大家用的也比较少,有时候碰到问题也很难找到。对于这个框架我也是新手,局部刷新dwz.ajax.js里面有好几种刷新方式。对于DWZ的局部处理稍微有点麻烦,不能直接ajax调用处理(dwz的刷新原理也是调用ajax)。要把需要刷新的一部分处理拿出来单独放到一个页面去,相当于每次局部刷新的时候,其实就是去重新加载一下刷新页面。
datagrid的刷新有几个地方要注意:
1, 把需要刷新的div块 抽出来放到单独的页面(temptable.jsp)
2. 需要一个隐藏的form表单,表单里面包含需要提交的字段,请求是对当前temptable.jsp的刷新。
下面就稍微举个例子方便理解
场景是:我的main.jsp里面 有个查询条件,根据查询条件的不同,刷新table的数据。
最初的main.jsp 页面效果如下:1. 一个下拉框选项条件,1个表格容器。
表格的数据是随着下拉框的值而变化的,只对表格的数据进行刷新。利用divSearch方法,我们更改一下。
<div>
<div>
<select id='searchSel'>
<!--查询条件-->
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
</div>
<div id='table'>
<table id='tablelist' class='table'></table>
</div>
</div>
<script>
$("#tablelist").datagrid({
url: XXX.do,
searchitem:[{
display:"姓名",name:"username"
}],
colModel:[{name:"num",display:"序号"},
{name:"name",display:"姓名"}]
})
</script>
1. 把main.jsp 的<table>抽出来放到temptable.jsp。
2. 在main里面追击隐藏的form。 from表单的回调函数调用divSearch()方法。
如下:
main.jsp
<div>
<div>
<select id='searchSel'>
<!--查询条件-->
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
<from id='tableform' style='display:none' οnsubmit="return divSearch(this, ''table'')" action='temptable.do' method='post'> <!--table为刷新的div的id,table数据放在此div-->
<input type='text' id='formoption' name='formoption' /> <!--请求参数,下拉框值 -->
<input type='submit' id='searchbtn' value='隐藏的按钮'>
</from>
</div>
<div id='table'>
</div>
</div>
<!-- 选中下拉框的值,更新表格,选中下拉框的事件,实际调用隐藏表格的submit提交按钮,提交到后台,刷新temptable.jsp, 然后再去temptable.jsp里面再去加载表内容 -->
<script>
$(function(){
$("#searchSel").bind("click",divtablefresh);
divtablefresh(); //初始化表格数据
})
function divtablefresh(){
$("#searchbtn").click(); //调用隐藏表单提交按钮,接下来去temptable页面。
}
</script>
temptable.jsp: 这个页面就只放table的加载。
<!--把tabel抽出来放到新jsp-->
<table id='tablelist' class='table'></table>
<script>
$("#tablelist").datagrid({
url: XXX.do, //请求数据。
searchitem:[{
display:"姓名",name:"username"
}],
colModel:[{name:"num",display:"序号"},
{name:"name",display:"姓名"}],
divSearch: '\'table'\' //这个id的table为main.jsp里面用来放表格数据的div的id
})
</script>
后台方法:
// temptable.do 仅作为页面跳转
public String temptable(){
return "temptable.jsp" ;
}
//xxxx.do //以json格式返回datagrid的数据
public void xxxx(){
response.printwiter("jsondata");
}
也不是太难,标红的地方是要特别注意,这个几个地方弄好了,datagrid的局部刷新就没问题了。