【下载文档:  JSP+Ajax 添加、删除多选框.txt 】

---

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 < 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;iif(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){
if(obj.elements[i].value==child)return true;
}
}
return false;
}
function validateURL(url){
//validateURL
if(url.search(/^[A-Za-z0-9 -]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^\"\"])*$/)!=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< 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");
function clickchk(obj){
var allcheck=true;
for(var i=0;ivar eli = obj.elements[i];
if(eli.tagName.toLowerCase()=="input" && eli.type=="checkbox"){
eli.parentNode.style.backgroundColor = eli.checked ? checkedCol :"";
if(eli.checked==false){allcheck=false;}
}
}
obj.elements["check"].value=allcheck?canAll:strAll;
}
function addSite(obj){
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;}
var list=document.getElementById("list");
var chkbox=document.createElement("input");
chkbox.type="checkbox";
chkbox.onclick=function(){clickchk(obj);}//全部选择后check按钮显示取消;
chkbox.value=url;
chkbox.name="url_chkbox";
var hr=document.createElement("hr");
hr.size="0";hr.style.borderTop="1px solid gray";
var txt=document.createTextNode(url);
var div=document.createElement("div");
div.appendChild(chkbox);
div.appendChild(txt);
div.style.borderBottom="1px dashed gray";
div.style.padding="5px";
//div.appendChild(hr);
//div.style.backgroundColor = "olive";
div.onmouseover=function(){
showDelete(this);
}
div.onmouseout=function(){
hideDelete(this);
}
list.appendChild(div);
//end add;
//如果已经添加了多选框则去掉禁用;
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;iif(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;iif(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){
obj.elements[i].checked = obj.elements[i].checked ? false : true;
}
clickchk(obj);
}
}
function del(list,obj){
//删除list的内容
var candel=false;
var i=list.childNodes.length;
var end = -1;
while( 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 )return;
//子集是div且还有子集
var s1 = s.childNodes[0];
if( s1.type.toLowerCase() =="checkbox" && s1.checked==true ){
//如果该子集里的checkbox选中,那么删除改子集(div);
candel = true;
list.removeChild(s);
}
}catch(ex){
//alert(ex.toString());
}
}
i--;
}
if(candel==false){alert("请选择你要删除的选项")}
isDisabledButton();
}
function isDisabledButton(){
var objform=document.sitelist;
var list=$("list");
var hasDivChild = false;
if(list.childNodes.length>0 ){
for(var i=0;ivar s=list.childNodes[i];
if( typeof(s)!="undefined" && s.tagName) {
if(s.tagName.toUpperCase()=="DIV")
hasDivChild = true;
}
}
}
objform.check.disabled= hasDivChild?false:true;
objform.recheck.disabled= hasDivChild?false:true;
objform.check.value=strAll;
objform.remove.disabled= hasDivChild?false:true;
}
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();}
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
2CLOSE 拖拽区
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 < 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;
////////////////////////
var d_width = 550;
var d_height = 30;
var ey=0,ex=0,lx=0,ly=0,canDrg=false,thiso=null;//
var x, y,rw,rh;
var divs=document.getElementsByTagName("div");
for (var i=0;iif(divs[i].getAttribute("rel")=="drag"){
divs[i].onmousemove=function(){
thismove(this);//实时得到当前对象与鼠标的值以判断拖动及关闭区域;
}
}
}
function thismove(o){
rw = parseInt(x)-parseInt(getAbsoluteLeft(o));
rh = parseInt(y)-parseInt(getAbsoluteTop(o));
}
function dargit(o,e){
thiso = o;
canDrg = true;
if(!document.all){
lx = e.clientX; ly = e.clientY;
}else{
lx = event.x; ly = event.y;
}
try{//设置渐变色;
if(rh0){//设定在拖动区域
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(rh0){//如果要设定拖动区域可以作判断
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