JSP+Ajax 添加、删除多选框

本例是采用JSP + Ajax + 文本来演示多选、全选，添加、删除、更新checkbox多选框的效果。

本例充分展现了利用JavaScript控制HTML DOM以及利用XML http 传递数据，利用JSP操作文本的效果。

1，JavaScript 用来控制页面内容的现实与增删效果;
2，JSP作为后台，对文本进行读取、写入、更新等操作;
3，文本格式是用来存储数据的，数据编码UTF-8;4, 本例子在win32,Red hat Linux 9下 jdk1.5,Tomcat 5.0,Apache 2.5下调试通过，同时兼容Firefox 1.0,Opera 8.0,IE6。

本例子的优点:

1，实时创建html对象，所见即所得的页面增删操作。显示速度加快，增加用户体验。
2，XML http传递数据是只是一个id或一个表单值,节省带宽。
3，本例子适合采用XML http方式,所以这个效果实用性强，可是JS/JSP代码都很简单。
4，有很多东西可以在其他项目中共用,并且解决了操作文本关于中文字符编码的问题。 (本例子在中文操作系统运行，所以选择了GBK编码，如果OS是英文的则需要另外处理，比如改编码为UTF-8，或者根据需要另外转换编码。)
5，有拖拽以及展开关闭的效果，用cookie记录了位置以及打开关闭状态，可以在某个项目里用。
6，有丰富的注释,适合初学者一起探讨。

缺点：

1，维护调试麻烦,为了这个效果是否值得这样做？如果采用普通的方式，嵌入一个iframe进来，会不会也可以。
2，代码没有更多地优化、简写,有些地方冗余。
3，交互设计方面没有好好地做，这里主要表示的是技术实现和交流。

源文件下载：checkbox.rar

<title> JSP+Ajax 添加删除Checkbox实例 example test</title> 
<meta content="EditPlus" name="Generator"/> 
<meta content="" name="Author"/> 
<meta content="" name="Keywords"/> 
<meta content="" name="Description"/> 
<script type="text/javascript"> 
function $() { 
  var elements = new Array(); 
  for (var i = 0; i < arguments.length; i++) { 
    var element = arguments[i]; 
    if (typeof element == 'string') 
      element = document.getElementById(element); 
    if (arguments.length == 1)  
      return element; 
    elements.push(element); 
  } 
  return elements; 
}

//cody by jarry; 
var emptyCol="",overCol="#f1f1f1",checkedCol="#F4FFF4"; 
function getAbsoluteLeft( ob ){ 
 if(!ob){return null;} 
   var obj = ob; 
   var objLeft = obj .offsetLeft; 
   while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){ 
     objLeft += obj .offsetParent.offsetLeft; 
     obj = obj .offsetParent; 
   } 
 return objLeft ; 
}

// get absolute TOP position 
function getAbsoluteTop( ob ){ 
 if(!ob){return null;} 
 var obj = ob; 
 var objTop = obj .offsetTop; 
 while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){ 
   objTop += obj .offsetParent.offsetTop; 
   obj = obj .offsetParent; 
 } 
 return objTop ; 
} 
String.prototype.trim = function() 
{ return this.replace(/(^\s*)|(\s*$)/g, "");} 
function isExist(child,obj){     
    //obj has element the child; 
   for(var i=0;i<obj.elements.length;i++){ 
    if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){ 
       if(obj.elements[i].value==child)return true; 
    } 
   } 
   return false; 
}

function countLength(obj){ 
 if(obj==null)return; 
 var dLen = 0,sLen = 0; 
 for(i=0; i< obj.length; i++ ){ 
   if(obj.charCodeAt(i) > "0" && obj.charCodeAt(i) < "128") 
     sLen+=1; 
    else 
      dLen+=2; 
 } 
  totalLen = sLen+dLen; 
  return totalLen; 
} 
var strAll=unescape("%u5168%u9009"); 
var canAll=unescape("%u53D6%u6D88");

var url=obj.url.value.trim(); 
  if(url.match(/^\s*$/g) || !validateURL(url)){alert("请输入正确网址：如mysite.com");obj.url.focus();return;} 
  if(isExist(url,obj)){alert("你添加的网址已经存在列表中");return;}

//如果已经添加了多选框则去掉禁用; 
  if(obj.check.disabled==true){ 
    obj.check.disabled=false; 
    obj.recheck.disabled = false; 
    obj.remove.disabled=false; 
    }

return false; 
} 
function checkall(obj){//全选or取消全选; 
    var chk=obj.elements["check"]; 
   for(var i=0;i<obj.elements.length;i++){ 
    if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){ 
      if(chk.value==strAll){//check all checkbox input; 
      obj.elements[i].checked=true; 
      obj.elements[i].parentNode.style.backgroundColor = checkedCol; 
      }else{ 
       obj.elements[i].checked=false; 
       obj.elements[i].parentNode.style.backgroundColor = emptyCol; 
      } 
          
    } 
  }  
  if($('list').childNodes.length<=1)return; 
  chk.value=chk.value==canAll?strAll:canAll; 
  //更改全选/取消的显示; 
} 
function reverseCheck(obj){ 
      var chk=obj.elements["check"]; 
   for(var i=0;i<obj.elements.length;i++){ 
    if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){ 
      obj.elements[i].checked = obj.elements[i].checked ? false : true; 
    } 
    clickchk(obj); 
  }  
}

function delSingle(objparent,objdel,objchild){ 
       objparent.removeChild(objchild); 
       objdel.style.display="none"; 
// 
   isDisabledButton(); 
   
}

function editSingle(objparent,objedit,objchild){

function makeLink(text , tag){ 
         var temobj = document.createElement(tag); 
         temobj.style.marginLeft="5px"; temobj.style.marginRight="5px"; 
         temobj.style.textDecoration="underline";temobj.style.cursor="pointer"; 
         temobj.appendChild( document.createTextNode(text) );

return temobj;      
     } 
     try{ 
     var secondChild = objchild.childNodes[1]; 
     var url = secondChild; 
     var urlStr =  url.nodeValue ;//? url.nodeValue : url.toString() ; 
     if(urlStr==null || urlStr.trim=="")return;

var editorPanel = document.createElement("span"); 
     objchild.removeChild(url); 
     var editor = document.createElement("input"); 
     editor.type="text"; 
     //var maxLen = parseInt(objparent.style.width) - 250; 
     var maxLen = 50; 
     var thisLen = parseInt( countLength(urlStr) ); 
     editor.size =  maxLen > thisLen ? thisLen : maxLen; 
     editor.value = urlStr; 
     editor.select(); 
     editor.onmouseover=function(){this.select();}

//add to editorPanel; 
     editorPanel.style.fontSize="11px"; 
     editorPanel.style.color="blue"; 
     editorPanel.appendChild(editor); 
     editorPanel.appendChild(update); 
     editorPanel.appendChild(document.createTextNode("|")); 
     editorPanel.appendChild(cancle); 
     //add to objchild; 
     objchild.appendChild(editorPanel); 
   }catch(ex){ 
      alert(ex.toString()); 
   }finally{ 
      // 
   } 
}

var currentDiv; 
function showDelete(self){ 
  self.style.backgroundColor = overCol; 
 currentDiv = self; 
 var theid = "del_icon"; 
 if(!$(theid)){ 
     var delDiv=document.createElement("div"); 
     delDiv.id=theid; 
     var d=delDiv; 
     d.style.textAlign="center";d.style.fontSize="11px"; 
     var edit = document.createElement("span"); 
     edit.title="编辑此条";edit.style.textDecoration="underline"; 
     edit.onclick=function(){ 
         editSingle(currentDiv.parentNode,this.parentNode,currentDiv); 
     }

var del =  document.createElement("span"); 
     del.title="删除此条";del.style.textDecoration="underline"; 
     del.onclick=function(){ 
         delSingle(currentDiv.parentNode,this.parentNode,currentDiv); 
     }

edit.appendChild(document.createTextNode("edit")); 
     d.appendChild(edit); 
     d.appendChild(document.createTextNode(" | ")); 
     del.appendChild(document.createTextNode("delete")); 
     d.appendChild(del);

d.style.width="80px"; 
     d.style.lineHeight="20px"; 
     d.style.color="blue"; 
    // d.style.zIndex="-10"; 
//     d.style.backgroundColor="green"; 
     document.body.appendChild(d); 
     $(theid).onmouseover=function(){ 
      currentDiv.style.backgroundColor = overCol; 
      this.style.display=""; 
      //mouseOndeleteDiv=true; 
     }

// 
     $(theid).style.cursor="pointer"; 
 } 
 if($(theid)){ 
   $(theid).style.display=""; 
   var l= getAbsoluteLeft(self) + self.offsetWidth - 80; 
   var t= getAbsoluteTop(self) + 5; 
   var scrollT = self.parentNode.scrollTop;//减去出现滚动条的高度; 
   var t= getAbsoluteTop(self) + 5 - scrollT; 
   $(theid).style.position="absolute"; 
   $(theid).style.left = l+"px"; 
   $(theid).style.top = t+"px"; 
 } 
}

function hideDelete(self){ 
 var theid = "del_icon"; 
  if( $(theid) ){ 
   self.style.backgroundColor = self.childNodes[0].checked?checkedCol:emptyCol; 
   $(theid).style.display="none"; 
  } 
} 
</script>

</style> 
<pre> 
本例是采用JSP + Ajax + 文本来演示多选、全选，添加、删除、更新checkbox多选框的效果。 
本例充分展现了利用JavaScript控制HTML DOM以及利用XML http 传递数据，利用JSP操作文本的效果。 
1，JavaScript 用来控制页面内容的现实与增删效果; 
2，JSP作为后台，对文本进行读取、写入、更新等操作; 
3，文本格式是用来存储数据的，数据编码UTF-8;
4, 本例子在win32,Red hat Linux 9下 jdk1.5,Tomcat 5.0,Apache 2.5下调试通过，同时兼容Firefox 1.0,Opera 8.0,IE6。

在线说明文档 <a href="#">http://jiarry.blogchina.com/5599587.html</a>
静态页面演示地址：<a href="#">http://jarryli.googlepages.com/checkbox_test.html</a> (详细的说明，随后补充)
源文件下载地址：<a href="#">http://jarryli.googlepages.com/checkbox.rar</a>

另外之前做的
 
PHP+Ajax 发帖程序实例:<a href="#">http://jiarry.blogchina.com/5555296.html</a>  源码下载:<a href="#">http://jarryli.googlepages.com/post_ajax.rar</a>
 
JSP登录证码无刷新提示:<a href="#">http://jiarry.blogchina.com/5287654.html</a> 源码下载:<a href="#">http://jarryli.googlepages.com/imgValidate.rar</a>

<div class="drag" id="siteMainDarg" onmousedown="dargit(this,event);" rel="drag" style="left:10px;top:10px;"> 
<div class="da"><span class="max_min_btn" id="max_min" style="background-color:#333"><font style="font-family:webdings">2</font>CLOSE</span>  拖拽区</div> 
<div id="sitelistDiv">

<div onmouseout="hideDelete(this);" onmouseover="showDelete(this);" style="padding:5px;border-bottom:1px dashed gray"><input name="url_chkbox" onclick="clickchk(this.form)" type="checkbox" value="example.com"/>example1.com </div> 
<div onmouseout="hideDelete(this);" onmouseover="showDelete(this);" style="padding:5px;border-bottom:1px dashed gray"><input name="url_chkbox" onclick="clickchk(this.form)" type="checkbox" value="example.com"/>example2.com </div>

</div> 
  <input disabled="" name="check" onclick="checkall(this.form)" type="button" value="全选"/>  <input disabled="" name="recheck" onclick="reverseCheck(this.form)" type="button" value="反选"/>  <input disabled="" name="remove" onclick="del($('list'),this.form)" type="button" value="删除"/>

</form> 
</div> 
<div class="shadowBottom"> </div> 
</div>

Cody by JarryLi@gmail.com;

homepage:<a href="#">jiarry.126.com</a>
 
Blog:<a href="#">http://jiarry.blogchina.com</a> 
<script> 
//页面加载时初始化 
function init(l,f){ 
  var list=l; 
  f.check.disabled=list.childNodes.length>1?false:true; 
  f.recheck.disabled=list.childNodes.length>1?false:true; 
  f.check.value=strAll; 
  f.remove.disabled=list.childNodes.length>1?false:true;  
} 
window.onload=function(){ 
    init($("list"),document.sitelist); 
}

activeCookie = true; 
if(document.cookie==null){ 
    //alert("cookie没有开启！"); 
     activeCookie = false; 
}

function getCookie(name) { 
    if( !activeCookie  ) return; 
    var nameEQ = name + "="; 
    var ca = document.cookie.split(';'); 
    for(var i=0;i < ca.length;i++) { 
        var c = ca[i]; 
        while (c.charAt(0)==' ') c = c.substring(1,c.length); 
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 
    } 
    return null; 
}

function setCookie(name , value) 
{ 
    if( !activeCookie  ) return; 
    var expdate = new Date(); 
    expdate.setTime(expdate.getTime() + (365*24*120)); 
    document.cookie=""+ name + "=" + value +";expires="+ expdate.toGMTString(); 
} 
var theLeft = getCookie("siteMainDargLeft")!=null ? getCookie("siteMainDargLeft") : 10; 
var theTop = getCookie("siteMainDargTop")!=null ? getCookie("siteMainDargTop") : 10; 
var listDivDisplay =  getCookie("sitelistDivDisplay")!=null ? getCookie("sitelistDivDisplay") : ""; 
$("siteMainDarg").style.top = theTop; 
$("siteMainDarg").style.left = theLeft; 
$("sitelistDiv").style.display = listDivDisplay; 
//cookie end; 
////////////////////////

document.onmouseup=function(){ 
        canDrg=false;//拖拽变量设为false 
 try{

if(document.all)thiso.filters.Alpha.opacity=100; 
  else thiso.style.MozOpacity=100;

}catch(e){} 
        if(document.all && thiso != null){ 
         thiso.releaseCapture(); 
           thiso = null; 
   } 
}

function st(o){ 
  if(rh <= d_height && rw >= d_width){ 
   canDrg=false; 
   showHide($("sitelistDiv")); 
   } 
}

function showHide(obj,self){ 
   obj.style.display = obj.style.display=="none"?"":"none"; 
   //$("del_icon").display="none"; 
   var icon = "1"; 
   var text = "OPEN"; 
   if(obj.style.display==""){ 
     icon = "2"; 
     text = "CLOSE"; 
   } 
    $("max_min").childNodes[0].innerHTML = icon; 
    $("max_min").childNodes[1].nodeValue = text;

}

window.onunload = function(){ 
   setCookie("siteMainDargLeft",getAbsoluteLeft( $("siteMainDarg") ) ); 
   setCookie("siteMainDargTop",getAbsoluteTop( $("siteMainDarg") ) ); 
   setCookie("sitelistDivDisplay",$("sitelistDiv").style.display ); 
    
}

</script>

</pre>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

由于时间有限，难免有很多问题，希望大家提出来。其实本例做的并不怎么好，拿出来希望众位多多入指点，同时也希望对同样是初学者的朋友来说有帮助，也希望大家一起交流进步，谢谢！:p

另外之前做的有关Ajax的东东，顺便请供参考，谢谢！

PHP+Ajax 发帖程序实例:　http://jiarry.blogchina.com/5555296.html　
源码下载:　post_ajax.rar

JSP登录证码无刷新提示:　http://jiarry.blogchina.com/5287654.html　
源码下载:　imgValidate.rar

代码没有整理，优化，所以本例子只供大家交流参考用，希望可以通过这种方式得到各位的帮助，谢谢！

经典论坛讨论：
http://bbs.blueidea.com/viewthread.php?tid=2673442