利用dtree生成下拉树
//网上可下载dtree相关资源
<link rel="StyleSheet" href="css/dtree.css" type="text/css" />
<script type="text/javascript" src="js/dtree.js"></script>
<script type="text/javascript">
var srcElement = null;
var valueElement = null;
function showTree(item,valueId){
srcElement = window.event.srcElement;
valueElement = document.getElementById(valueId);
var x = getLeft(item);
var y = getTop(item) + item.offsetHeight;
var w = item.offsetWidth;
blockDTree(x,y,w);
}
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
function blockDTree(x,y,w){
var item = document.getElementById("combdtree");
item.style.display = 'block';
item.style.top = y;
item.style.left = x;
}
function hiddenDTree(){
var item = document.getElementById("combdtree");
if(item){
item.style.display = 'none';
}
}
function setSrcValue(text,value){
srcElement.value = text;
valueElement.value = value;
hiddenDTree();
}
function setUnitValue(nameStr){
document.getElementById("dept").innerText=nameStr;
document.getElementById("combdtree").style.display='none';
}
</script>
</head>
<body>
//下拉列表形式的树形显示
<input type="hidden" id="addressFatherId" name="addressFatherId" value="0" />
<input type="text" name="dept" value="点击选择部门" id="dept" readOnly onfocus="showTree(this,'dept')"/>
<br><div id="combdtree" class="dtreecob">
<div class="dtree" style="overflow: auto; width: 100%;">
<script type="text/javascript">
d = new dTree('d');
d.add(0, -1, '请选择所在部门'); d.add(1, 0,"某某某有限公司","");
d.add(2, 1,"综合管理部","javascript:setUnitValue('综合管理部')");
d.add(3, 1,"项目开发部","");
d.add(4, 1,"技术研发部","javascript:setUnitValue('技术研发部')");
d.add(5, 3,"项目组一","javascript:setUnitValue('项目组一')");
d.add(6, 3,"项目组二","javascript:setUnitValue('项目组二')");
document.write(d);
</script></div>
<div class="dBottom"><a href="javascript:hiddenDTree();">关闭</a></div>
</div>
//树状显示
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p><br>
<script type="text/javascript">
d = new dTree('d');
d.add(0,-1,'数据：');
d.add(1,0,'某某某有限公司');
d.add(2,1,'综合管理部');
d.add(3,1,'项目开发部');
d.add(4,3,'项目组一');
d.add(5,3,'项目组二');
d.add(6,1,'技术研发部');
document.write(d);
</script>
</div>
//收到来自页面的list集合，进行树状显示
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
var i=2;
var j=0;
d = new dTree('d');
d.add(0,-1,'${list[0].deptname }');
d.add(1,0,'${list[1].deptname }');
document.write('<c:forEach items="${list}" var="dept" begin="2"><c:if test="${list[1].deptid==dept.parent_dept.deptid }">');
i++;
d.add(i,1,'${dept.deptname}');
document.write('<c:forEach items="${list}" var="dept_chd" begin="2"><c:if test="${dept.deptid==dept_chd.parent_dept.deptid }">');
j++;
d.add(j+i,i,'${dept_chd.deptname}');
document.write('</c:if></c:forEach>');
document.write('</c:if></c:forEach>');
document.write(d);
</script>
</div>
</body>
</html>