DWZ 局部刷新datagrid

   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' onsubmit="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的局部刷新就没问题了。