DWR和HTML

<script type="text/javascript" src="js/jquery/jquery-1.2.6.pack.js"></script>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<script type='text/javascript' src='/t148-dwr/dwr/interface/myjs.js'></script>
<script type='text/javascript' src='/t148-dwr/dwr/engine.js'></script>
<script type='text/javascript' src='/t148-dwr/dwr/util.js'></script>
<!--
  jquery和dwr共存
  1.先导jquery
  2.使用jquery不要使用$,用'jQuery'
 
-->
<table border="1" align="center" width="80%">
<thead>
<tr>

<th>
员工编号
</th>
<th>
员工姓名
</th>
<th>
员工部门
</th>
<th>
操作
</th>

</tr>
</thead>

<tbody id="mybody">

</tbody>

</table>
当前<span id="page"></span>页
共 <span  id="count"></span>页

[url=javascript:fenye( 1 )]【首  页】[/url]
[url=javascript:fenye( jQuery('#page').html()-1 )]【上一页】[/url]
[url=javascript:fenye( 1*jQuery('#page').html()+1 )]【下一页】[/url]
[url=javascript:fenye( jQuery('#count').html()  )]【尾  页】[/url]

<script>
    onload =  function()
    {
      fenye(1);
    }
  

    //分页显示员工方法
    function fenye(page)
    {
     
       myjs.mypage(page,function(map){
           //先删除表格中原来的内容
          DWRUtil.removeAllRows("mybody");
          DWRUtil.addRows("mybody",map.list,cell);
          document.getElementById("page").innerHTML = map.page;
          document.getElementById("count").innerHTML = map.count;
       });
    }
   
    //定义列
    var cell = [
        function(e){return e.empId},
        function(e){return e.empName},
        function(e){return e.dep?e.dep.depName:"无部门"},
        function(e){return "<a href=''>删除</a>"}
      ];
</script>



级联

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<script type='text/javascript' src='/t148-dwr/dwr/interface/myjs.js'></script>
<script type='text/javascript' src='/t148-dwr/dwr/engine.js'></script>
<script type='text/javascript' src='/t148-dwr/dwr/util.js'></script>

<select id="dep" name="dep" onchange="change(this)">
</select>

<select id="emp" name="emp">
</select>


<script>
   onload = function()
   {
      myjs.getAllDep(function(x){
         DWRUtil.addOptions("dep",x,"depId","depName");
         change( document.getElementById("dep") ); //注意位置
      });
     
     
   }
  
   //obj就是部门对象
   change = function(obj)
   {
      //删除所有员工
      DWRUtil.removeAllOptions("emp");
     
      //根据部门id查找员工集合
      myjs.getEmpByDep(obj.value,function(x){
         DWRUtil.addOptions("emp",x,"empId","empName");
      });
     
   }
</script>

评论

1 楼 wj539h 2011-07-06  

真是新的不能在新的新手