|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
最后更新时间：2007-11-15 关键字: tree
功能简单，直接HTML显示，可支持大数据量，显示速度应该会比一般的树型控件要快很多。。。
IE6测试通过，欢迎试用 [2007-11-14] 新增附件tree_2.rar 支持复选框 [2007-11-15] 新增附件tree2007115.rar 支持复选框，自动选中相关上下节点 声明：JavaEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
|
| 返回顶楼 | |
|
最后更新时间：2007-11-14
如果我要是想做一个checkbox或者radio的树怎么做啊？
|
| 返回顶楼 | |
|
最后更新时间：2007-11-14
一堆div……
至于树状组件，我自己也封装了一个，基于Prototype，动画效果用的script.aculo.us，是完全符合web标准的，做到了三层分离，在没有js或者css的情况下一样可用。
最近比较忙，等闲下来发出来给大家看看。
|
| 返回顶楼 | |
|
最后更新时间：2007-11-14
单选的实现上已经是上面实现了，没必要一定要单选框。
下面是支持复选框的实现代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript">
function nodeClick(o){
var obj,chk,disp,level,selectValue
obj = event.srcElement;
if (obj==o) return;
if (obj.tagName=="INPUT"){
chk = obj.checked;
level = parseInt(obj.parentElement.className.substring(1));
while(obj.parentElement.nextSibling&&parseInt(obj.parentElement.nextSibling.className.substring(1))>level){
obj = obj.parentElement.nextSibling.all.tags("INPUT")[0];
obj.checked = chk;
}
selectedText.innerHTML = "已选择：<b>" + getTreeValue() + "</b>";
return;
}
if (!obj.nextSibling) return;
disp = obj.nextSibling.style.display!="none"?"none":"block";
level = parseInt(obj.className.substring(1));
while(obj.nextSibling&&parseInt(obj.nextSibling.className.substring(1))>level){
obj = obj.nextSibling;
obj.style.display = disp;
}
}
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(",");
}
</script>
<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;}
</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"
onmouseover="javascript:var obj=event.srcElement;if(obj!=this)obj.style.backgroundColor='#f3f6ff';"
onmouseout="javascript:var obj=event.srcElement;if(obj!=this)obj.style.backgroundColor='';"
onclick="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>
|
| 返回顶楼 | |
|
最后更新时间：2007-11-15
重新上传了tree20071115.rar文件，支持自动关联上下节点，欢迎高手试用指点
|
| 返回顶楼 | |
|
最后更新时间：2007-11-16
对 静态的树不错，控件树一般用于动态
|
| 返回顶楼 | |
|
最后更新时间：2007-11-16
ddt111 写道 对 静态的树不错，控件树一般用于动态 我的设计本身是基于动态的，结果集只需要包含字段“ID”，“Name”，“level”就可以了，其最大的优点，显示时不需要遍历所有节点，不需要生成树结构，，，只要输出<div>...</div>就行了...
并且我已经做成Java的标签控件，在公司产品开发中使用 |
| 返回顶楼 | |
|
最后更新时间：2007-11-16
基于jquery 仿ext做的树，看的比较舒服（fixefox下位置有的没对齐，opera下有点对的不齐），速度貌似还行。动态加载也行。
|
| 返回顶楼 | |
|
最后更新时间：2007-11-17
看了几行代码。首先你这个脚本跨浏览器就成问题。
|
| 返回顶楼 | |
|
最后更新时间：2007-11-19
up2vs 写道 看了几行代码。首先你这个脚本跨浏览器就成问题。 楼上的兄弟可否帮忙改进一下？
您所说的“几行代码”是不是event对象在IE和FF的调用方法不同，我之前就知道这个问题，可暂时不巧得怎么改进优化写法 |
| 返回顶楼 | |
