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

JSP+Ajax 添加删除Checkbox实例 example test function $() { var elements = new Array(); for (var i = 0; i \"\"])*$/)!=0){ return false; //}else if(url.substring(0,4)=="www."){ //return false; }else{ return true; }}function countLength(obj){ if(obj==null)return; var dLen = 0,sLen = 0; for(i=0; i "0" && obj.charCodeAt(i) end ){ //如果存在child var s=list.childNodes[i]; if(typeof(s)!="undefined" && s.tagName){ try{ //如果child的类型不为空; var tgname = s.tagName.toUpperCase(); if(tgname != "DIV" || s.childNodes.length 0 ){ for(var i=0;i thisLen ? thisLen : maxLen; editor.value = urlStr; editor.select(); editor.onmouseover=function(){this.select();} var update = makeLink("update","font");update.title="更新"; update.onclick=function(){ //updateContens(); var newvalue = editor.value; if(newvalue.trim() == ""){editor.focus();return;} objchild.removeChild(objchild.childNodes[1]); objchild.appendChild(document.createTextNode(newvalue)); } var cancle = makeLink("cancle","font");cancle.title="取消"; cancle.onclick=function(){ objchild.removeChild(objchild.childNodes[1]); objchild.appendChild(url); } //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"; }} .drag{position:absolute;width:600px; background-color:#f1f1f1;filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; }.da{width:100%;background-color:gray;cursor:move;font-size:14px;vertical-align:middle;line-height:30px}.max_min_btn{float:right;color:red;cursor:pointer;font-size:9pt;width:50px;line-height:30px;text-align:center;}#list{border-top:2px ridge #9A9898;border-left:2px ridge #9A9898;border-bottom:1px solid #D4D0C8;border-right:1px solid #D4D0C8;background:white;width:578px;height:350px;margin:10px;overflow:auto}.shadowBottom{margin-left:6px;height:5px;background:gray;font-size:0px;line-height:0px;filter:alpha(opacity=55);-moz-opacity:0.55;opacity:0.55;}

本例是采用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。在线说明文档  http://jiarry.blogchina.com/5599587.html 静态页面演示地址： http://jarryli.googlepages.com/checkbox_test.html  (详细的说明，随后补充)源文件下载地址： http://jarryli.googlepages.com/checkbox.rar 另外之前做的PHP+Ajax 发帖程序实例: http://jiarry.blogchina.com/5555296.html   源码下载: http://jarryli.googlepages.com/post_ajax.rar JSP登录证码无刷新提示: http://jiarry.blogchina.com/5287654.html  源码下载: http://jarryli.googlepages.com/imgValidate.rar 
  2 CLOSE   拖拽区
 
  http://    
 example1.com 
 example2.com 
          
 
Cody by JarryLi@gmail.com;CopyRight?Jarry,All right reserved!本例仅供个人参考，引用请保留版权信息。谢谢！homepage: jiarry.126.com Blog: http://jiarry.blogchina.com  //页面加载时初始化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  0){//设定在拖动区域      if(document.all)thiso.filters.Alpha.opacity=80;      else thiso.style.MozOpacity=80/100;  }}catch(e){}    st(o); }document.onmousemove = function(e){if(!document.all){ x = e.clientX; y = e.clientY; }else{ x = event.x; y = event.y; }if(canDrg){      if(rh 0){//如果要设定拖动区域可以作判断        var ofsx = x - lx;        thiso.style.left = (parseInt(thiso.style.left) + ofsx) +"px";        lx = x;        var ofsy = y - ly;        thiso.style.top = (parseInt(thiso.style.top) + ofsy) +"px";        ly = y;   }else{       canDrg=false;   } }}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_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 );   }    
     [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 

      
查看更多关于JSP+Ajax 添加、删除多选框的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did69138