<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <mce:script language="javascript"><!-- function nodeClick(o) { var obj, chk, disp, level, selectValue // 定义变量不说了吧 obj = event.srcElement; // 将event的srcElement属性赋予obj，注:IE下。此属性和DOM的target属性兼容 // srcElement是指发生事件的文档元素 if (obj == o) // 如果obj与传过来的参数o相等，则返回 return; // ----------------这一段的效果是将用户选择了哪几个checkbox显示出来 // 如果元素是INPUT if (obj.tagName == "INPUT") { chk = obj.checked; // 将元素的checked值赋予chk，true or false // 取得input元素的父元素的样式的第2个字符，即下面的内联样式表中的id为tree，class为l1,l2,l3,l4的那些东西,取得值为1,2,3,4 level = parseInt(obj.parentElement.className.substring(1)); // 遍历input的父层所有相邻元素 while (obj.parentElement.nextSibling && parseInt(obj.parentElement.nextSibling.className.substring(1)) > level) { obj = obj.parentElement.nextSibling.all.tags("INPUT")[0]; // 又通过父元素找父下面的input子元素 obj.checked = chk; // 赋予值,true or false } // 作为最上端显示用，不过个人觉得直接用"selectedText"这样写不太严格 selectedText.innerHTML = "U have selected： <b>" + getTreeValue() + " </b>"; // 调用了getTreeValue()方法，下有解释 return; } // 如果元素不存在相邻节点了，则返回 if (!obj.nextSibling) return; // ----------------这一段的效果是折叠树 disp = obj.nextSibling.style.display != "none" ? "none" : "block"; // 如果相邻节点的style下的display属性不等于none，则 // 将它(display)设为none，否则设为block level = parseInt(obj.className.substring(1)); // 遍历obj的相邻节点 while (obj.nextSibling && parseInt(obj.nextSibling.className.substring(1)) > level) { obj = obj.nextSibling; obj.style.display = disp; // 设display属性,显示或折叠起来 } } // 此函数为取得已选择的节点，已选择的就把checkbox的值存入数组中 function getTreeValue() { var val = []; var objs = document.getElementById("tree").all.tags("INPUT"); for (var i = 0; i < objs.length; i++) if (objs[i].checked) val.push(objs[i].value); return val.join(","); } // --></mce:script> <mce:style><!-- * { font-size: 9.5pt; } #tree div { height: 16px; background-repeat: no-repeat; padding-top: 2px; padding-left: 20px; cursor: default; } #tree .l1, .l2, .l3 { background-image: url('folder.gif'); } #tree .l4 { background-image: url('file.png'); } #tree .l1 { background-position: 2 0%; } #tree .l2 { background-position: 52 0%; } #tree .l3 { background-position: 64 0%; } #tree .l4 { background-position: 80 0%; } #tree input { margin: -2px; margin-right: 20px; } --></mce:style><style mce_bogus="1"> * { font-size: 9.5pt; } #tree div { height: 16px; background-repeat: no-repeat; padding-top: 2px; padding-left: 20px; cursor: default; } #tree .l1, .l2, .l3 { background-image: url('folder.gif'); } #tree .l4 { background-image: url('file.png'); } #tree .l1 { background-position: 2 0%; } #tree .l2 { background-position: 52 0%; } #tree .l3 { background-position: 64 0%; } #tree .l4 { background-position: 80 0%; } #tree input { margin: -2px; margin-right: 20px; } </style> </head> <body> <div id="selectedText"> </div> <div id="tree" style="width:300px;height:450px;border:1px outset #EEEEEE;padding-top:2px;overflow-x:hidden;overflow-y:scroll;display:inline" οnmοuseοver="javascript:var obj=event.srcElement;if(obj!=this)obj.style.backgroundColor='#f3f6ff';" οnmοuseοut="javascript:var obj=event.srcElement;if(obj!=this)obj.style.backgroundColor='';" οnclick="javascript:nodeClick(this)"> <div class="l1"> 请选择部门 </div> <div class="l2"> <input type="checkbox" name="dept" value="申银万国">申银万国 </div> <div class="l3"> <input type="checkbox" name="dept" value="经纪管理总部">经纪管理总部 </div> <div class="l4"> <input type="checkbox" name="dept" value="上海余姚国债">上海余姚国债 </div> <div class="l4"> <input type="checkbox" name="dept" value="上海新昌路证券营业部">上海新昌路证券营业部 </div> <div class="l4"> <input type="checkbox" name="dept" value="上海莘庄证券营业部">上海莘庄证券营业部 </div> <div class="l4"> <input type="checkbox" name="dept" value="上海中华路证券营业部">上海中华路证券营业部 </div> <div class="l4"> <input type="checkbox" name="dept" value="上海瞿溪路营业部">上海瞿溪路营业部 </div> <div class="l4"> <input type="checkbox" name="dept" value="上海东体育会路营业部">上海东体育会路营业部 </div> <div class="l4"> <input type="checkbox" name="dept" value="上海奉贤证券营业部">上海奉贤证券营业部 </div> <div class="l4"> <input type="checkbox" name="dept" value="上海福州路证券营业部">上海福州路证券营业部 </div> <div class="l4"> <input type="checkbox" name="dept" value="上海余姚路证券营业部">上海余姚路证券营业部 </div> <div class="l4"> <input type="checkbox" name="dept" value="上海虹古路证券营业部">上海虹古路证券营业部 </div> <div class="l4"> <input type="checkbox" name="dept" value="上海龙茗路证券营业部">上海龙茗路证券营业部 </div> <div class="l4"> <input type="checkbox" name="dept" value="上海金山证券营业部">上海金山证券营业部 </div> <div class="l4"> <input type="checkbox" name="dept" value="上海洛川东路营业部">上海洛川东路营业部 </div> <div class="l3"> <input type="checkbox" name="dept" value="银证通部门">银证通部门 </div> <div class="l4"> <input type="checkbox" name="dept" value="银证通结算机构">银证通结算机构 </div> <div class="l3"> <input type="checkbox" name="dept" value="经纪管理总部">经纪管理总部 </div> </div> </body> </html>
来自：
http://topic.csdn.net/u/20080819/13/a03c4f63-ec10-4344-a88c-1f8666dc6f64.html?536801680
112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
