DWR2.0中checkbox的value值问题(意外收获)

于 2008-03-27 17:27:03 发布
阅读量167 收藏
点赞数
文章标签： DWR JavaScript 百度 Spring JSP ViewUI

     这个问题是继dwr缓慢的有一个让我伤脑筋的问题，我在百度和google想寻求解决方法，可是没有人知道，也许知道没有发帖。最后一个以外的想法，让我找到了解决方法。
     我的功能原型是两个下拉列表的联动，这个在先前已经成功，下面就是最后一个下拉列表onchange事件，调用dwr中的回调方法，进行查询显示在我指定的table处。下拉列表联动我就不说了，这次主要说查询后的list回调，以及checkbox得到对象的主键问题。

首先看看底层service方法：

//	根据单位和部门得到所得信息
	public List getAllPeople(String companyId,String departmentId) {
//		初始化一个list
		List people = null;
		String hql="from EmployeeArchives as t where t.companyId ='"+companyId+"' and t.departmentId='"+departmentId+"'";
		try {
//			调用底层dao方法
			people = employeeArchivesDAO.find(hql);
		} catch (DAOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
    	System.out.println(people.size());
//    	返回list对象
        return people;
    }

 下面看看静态页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  <head>
  <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://"
                        + request.getServerName() + ":" + request.getServerPort()
                        + path + "/";
%>
<base href="<%=basePath%>">
    <title>My JSP 'QJ020305.jsp' starting page</title>
    <META HTTP-EQUIV="pragma" CONTENT="no-cache"/> 
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"/> 
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
<script  src="<%=basePath%>/dwr/engine.js" type="text/javascript"></script> 
<script  src="<%=basePath%>/dwr/util.js" type="text/javascript"></script> 
<script  src="<%=basePath%>/dwr/interface/Deptement.js" type="text/javascript"></script> 
<script  src="<%=basePath%>/dwr/interface/Company.js" type="text/javascript"></script> 
<script  src="<%=basePath%>/dwr/interface/People.js" type="text/javascript"></script> 
</head>  
<body οnlοad="update1()">
<table width="98%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr class="trtop1">
    <td height="30" class="wenzi1">添加新学员</td>
  </tr>
</table>
<form action="" method="post" name="form1">
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="1">
  <tr>
    <td>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="12" height="26" class="tdtleftbg"> </td>
        <th class="tdtdline">xxx班级添加新学员</th>
        <td width="12" class="tdtrightbg"> </td>
      </tr>
    </table>
	</td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="tbbg1">
     
      <tr>
        <td colspan="3" align="left" class="trbg2">单位:
          <label>
          <select name="classid" id="classid" οnchange="javascript:update2();">
          </select>
          </label>
          部门:          
          <select  name="userid" id="userid" οnchange="javascript:init();">
          </select>
          <input type="button" name="Submit22" value="查询" οnclick="document.location.href='QJ020305.htm';"></td>
      </tr>
      <tr>
        <td colspan="3" align="left" class="trbg2">未添加学员名单：
          <input type="button" name="Submit223" value="添加" οnclick="return A();">
          <input type="button" name="Submit223" value="全选" οnclick="return selected_all(this);">
          <input type="button" name="Submit2222" value="返回" onClick="history.go(-1);"/></td>
      </tr>
      <tr>
        <td align="center" class="trbg2">序号</td>
        <td align="center" class="trbg2">选择</td>
        <td align="center" class="trbg2">成员名称</td>
        <td align="center" class="trbg2">主键</td>
      </tr>
     <tbody id="peoplebody">
    <tr id="pattern" style="display=none">
      <td align="center" class="trbg2">
        <span id="tableName">序号</span><br/>
      </td>
      <td align="center" class="trbg2">
        <input id="checkbox" name="checkbox" type="checkbox" />       
      </td>
      <td align="center" class="trbg2">
       <span id="tableAddress">成员名称</span>
      </td>     
       <td align="center" class="trbg2">
       <span id="empid">主键</span>
      </td>   
    </tr>
  </tbody>
    </table></td>
  </tr>     
  <tr>
    <td>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="12" height="26" class="tddleftbg"> </td>
        <td class="tdtdline"> </td>
        <td width="12" class="tddrightbg"> </td>
      </tr>
    </table>
	</td>
  </tr>
</table>
  <div align="center">
  </div>
</form>
</body>
</html>

 

下面是js，以及回调方法：

<script> 
function update1() 
{ 
       Deptement.ClassList(createList1); 
} 
function createList1(data) 
{ 
    DWRUtil.removeAllOptions("classid"); 
    DWRUtil.addOptions("classid",data); 
} 
function update2() 
{ 
       Company.UserList(DWRUtil.getValue("classid"),createList2); 
} 
function createList2(data) 
{    
    DWRUtil.removeAllOptions("userid"); 
    DWRUtil.addOptions("userid",data); 
} 
function query(){
    DWRUtil.removeAllRows("apartmentsbody");
    var classid = DWRUtil.getValue("classid");
    var userid = DWRUtil.getValue("userid");
    Query.queryList(classid,userid,fillt);
}
var cellFuncs = [
  function(data) { return data[0]; },
  function(data) { return data[1]; },
  function(data) { return data[2];},
  function(data) { return data[3]; },
 ];
function fillt(list){
   DWRUtil.addRows("apartmentsbody",list,cellFuncs);
}
function init() {
  fillTable();
}
var peopleCache = { };
var viewed = -1;
function fillTable() {
  var company = DWRUtil.getValue("classid");
  alert("+++++++++"+company);
  var deptment = DWRUtil.getValue("userid");
  alert("+++++++++"+deptment);
  People.getAllPeople(company,deptment,function(people) {
    dwr.util.removeAllRows("peoplebody", { filter:function(tr) {
      return (tr.id != "pattern");
    }});  
    var person, id;
    people.sort(function(p1, p2) { return p1.employeeName.localeCompare(p2.employeeName); });
    for (var i = 0; i < people.length; i++) {
      person = people[i];
      id = person.employeeArchivesId;          
      dwr.util.cloneNode("pattern", {idSuffix:id});     
      dwr.util.setValue("tableName" + id, person.employeeName);
      dwr.util.setValue("tableSalary" + id, person.gender);
      dwr.util.setValue("tableAddress" + id, person.nativePlace);       
      dwr.util.setValue("checkbox" +id, person.employeeArchivesId);     
      dwr.util.setValue("empid" +id, person.employeeArchivesId);     
      // box.innerHTML="<input id='checkbox' type='checkbox'  value='id' />";
      // document.getElementById("checkbox").value=id;
      $("pattern" + id).style.display = "block";     
      peopleCache[id] = person;
    }
  });
}
</script>

 

这个js包括了两个查询回调方法，都可以用，一个使用 DWRUtil.addRows"apartmentsbody",list,cellFuncs);这个方法，是可以显示的，但是要循环输出一个按钮，或者是checkbox有点难，至少我不会，如果有朋友知道，可以给我恢复一下，让我也能学习点东西，谢谢。

第二个方法就是fillTable()这个函数，他得到list后，利用dwr与spring整合后的convert元素中bean配合，正如我上面定义的一个person变量，将list循环转化为person.最后输出。以上这些我想大家也都做过。

    下面是我遇到的困难，以及解决。我在循环的时候，大家应该已经看到，我想给checkbox赋值，并且是对象的主键，以便最后选择提交。就这个问题有难为我了两天，我查遍了所有资料，没有一个提及到，有个外国朋友说dwr2.0不能给checkbox这个标签setvalue我不信，但是一天以后我和他想的一样，弄得我简直就要神经了，可是我全选后，checkbox的值总是默认值“on”。我想了很多办法，可是都不行，不过有一种方法，让我有了想法，我看看dwr官方demo，他有一个table做了一个edit和delete按钮，上面有个onclick方法：edit（this.id）于是我想我onclick，checkbox的时候页写个这个方法试试，写完后运行ok，主键号可以得到，可是得到下来呢，我怎麽让提交能把这些id带过去呢，我想只要点一下，将主键写到一个文本域中（隐藏），不断累加，用逗号隔开，但是，如果我再点掉又触发了一次事件，再次写入文本域中，这样提交，会把不需要的东西提交，所以这样写，也不行。

下面是我的checkbox全选js 

<script> 
function A(){
var allcheckboxs = document.getElementsByName("checkbox");
	var array = new Array();
	var isSelect = false;
	var index = 0;
	//取值
	for(i=0;i<allcheckboxs.length;i++){
		if(allcheckboxs[i].checked){
			array[index] = allcheckboxs[i].id.substring(8);				
			index++;
			isSelect = true;
		}
	}
	if(!isSelect){   //判断是否选中
		alert("没有选中任何记录!!");
		return false;
	}else{ //有选中记录
			    if(confirm("是否保存信息?")){		
					javascript:location="QJ020305Action.do?logId="+array;	
					alert("成功保存信息");
					return true;
				}else{
				    return false;
				}
	}
}
function selected_all(obj){
	var allcheckboxs = document.getElementsByName("checkbox");
	var flag = false;
	
	for(i=0;i<allcheckboxs.length;i++){
		flag = allcheckboxs[i].checked;
	}
	if(flag == false){
		for(i=0;i<allcheckboxs.length;i++){
			allcheckboxs[i].checked = true;			
		}
	}else{
		for(i=0;i<allcheckboxs.length;i++){
			allcheckboxs[i].checked = false;	
		}
	}	
}
</script>

眼力好的朋友们已经看到了和所有全选js不同的是

if(allcheckboxs[i].checked){
			array[index] = allcheckboxs[i].id.substring(8);				
			index++;
			isSelect = true;
		}


这个地方我用到了allcheckboxs[i].id.substring(8);不向以前都是。value我试了很多次都不行，而现在用这个完全可以，只不过要substring，因为dwr出来的这个id是checkbox+id，这样就ok了，说了一大堆，这才是重点，网上没有人这样做。但是，这样可以，真是意外的收获和惊喜。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值