📄 tree.jsp
字号:
<%@ page contentType="text/html; charset=utf-8" language="java" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<%--
·根据层次码确定结构
·同级层数据没有顺序（按照记录集顺序读取）
·断开的层次码不会影响整个树
·加入全开合树枝控制
·仅支持ie浏览器
·字段结构要求： id|层次码|显示文本|叶子节点标识
·字典说明：节点的id与业务id不一样！一般情况下，节点id都是根据levelcode生成的。业务id在树的操作处理中不起作用
--%>
<%
//-------------------------------------------------
//模拟记录集数据：
String StrArr[][] =new String[20][4];
StrArr[1][0]="2234"; //id
StrArr[1][1]="002" ; //levelcode
StrArr[1][2]="节点2"; //content
StrArr[1][3]="F"; //leaf
StrArr[2][0]="39870"; //id
StrArr[2][1]="003" ; //levelcode
StrArr[2][2]="节点3"; //content
StrArr[2][3]="F"; //leaf
StrArr[3][0]="00011 ";//id
StrArr[3][1]="001001" ;//levelcode
StrArr[3][2]="节点11" ;//content
StrArr[3][3]="F" ;//leaf
StrArr[4][0]="635412 ";//id
StrArr[4][1]="001002" ;//levelcode
StrArr[4][2]="节点12" ;//content
StrArr[4][3]="F" ;//leaf
StrArr[6][0]="2155 ";//id
StrArr[6][1]="002001" ;//levelcode
StrArr[6][2]="节点21" ;//content
StrArr[6][3]="F" ;//leaf
StrArr[7][0]="2299 ";//id
StrArr[7][1]="002002" ;//levelcode
StrArr[7][2]="节点22" ;//content
StrArr[7][3]="F" ;//leaf
StrArr[8][0]="235364 ";//id
StrArr[8][1]="002003" ;//levelcode
StrArr[8][2]="节点23" ;//content
StrArr[8][3]="F" ;//leaf
StrArr[9][0]="000301 ";//id
StrArr[9][1]="003001" ;//levelcode
StrArr[9][2]="节点31" ;//content
StrArr[9][3]="F" ;//leaf
StrArr[10][0]="3288 ";//id
StrArr[10][1]="003002" ;//levelcode
StrArr[10][2]="节点32" ;//content
StrArr[10][3]="F" ;//leaf
StrArr[11][0]="33434 ";//id
StrArr[11][1]="003003" ;//levelcode
StrArr[11][2]="节点33" ;//content
StrArr[11][3]="F" ;//leaf
StrArr[12][0]="111546 ";//id
StrArr[12][1]="001001001" ;//levelcode
StrArr[12][2]="节点111" ;//content
StrArr[12][3]="T" ;//leaf
StrArr[13][0]="11243 ";//id
StrArr[13][1]="001001002" ;//levelcode
StrArr[13][2]="节点112" ;//content
StrArr[13][3]="T" ;//leaf
StrArr[14][0]="1921 ";//id
StrArr[14][1]="001002001" ;//levelcode
StrArr[14][2]="节点121" ;//content
StrArr[14][3]="T" ;//leaf
StrArr[15][0]="1292 ";//id
StrArr[15][1]="001002002" ;//levelcode
StrArr[15][2]="节点122" ;//content
StrArr[15][3]="T" ;//leaf
StrArr[5][0]="7230 ";//id
StrArr[5][1]="001002003" ;//levelcode
StrArr[5][2]="节点123" ;//content
StrArr[5][3]="F" ;//leaf
StrArr[16][0]="391000 ";//id
StrArr[16][1]="003003001" ;//levelcode
StrArr[16][2]="节点331" ;//content
StrArr[16][3]="T" ;//leaf
StrArr[17][0]="83290 ";//id
StrArr[17][1]="003003002" ;//levelcode
StrArr[17][2]="节点332" ;//content
StrArr[17][3]="T" ;//leaf
StrArr[0][0]="13245"; //id
StrArr[0][1]="001" ; //levelcode
StrArr[0][2]="节点1"; //content
StrArr[0][3]="F"; //leaf
//-------------------------------------------------
String ActionPage="TREE_ACTION.jsp";
%>
<style>
/*树的样式*/
.myTree_C1{ font-size:12px;}
.myTree_C1 div{ margin-left:15px;}
</style>
<script language="javascript">
//Trim
/* ***************** */
String.prototype.Trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, "");
}
//子函数——得到父节点id（即父亲项的levelcode）
function getFatherID(levelcode){
var fatherID="";
if(levelcode.length>3){
fatherID="J" + levelcode.substring(0,levelcode.length-3);
}
else{
fatherID="myTree";
}
return fatherID;
}
</script>
</head>
<body style="background-color:#FFFFFF">
<form action="<%=ActionPage %>" method="post">
<ul id='UlDatas' style='display:none'>
<%
//将入口数据内容顺序储存到网页控件的value:
for(int i=0;i<=17;i++){
for(int j=0;j<=3;j++){
out.print("<li>" + StrArr[i][j] + "</li>");
}
}
%>
</ul>
<script language="javascript">
//javascript储存入口数据的数组：
var stringArr = new Array();
for(var i=0;i<=17;i++){
stringArr[i] = new Array(4); //*注意要与记录项数相等*
}
//定义数型结构的图片源：
var MlastIMG="images/tree/ftv2mlastnode.gif";
var PlastIMG="images/tree/ftv2plastnode.gif";
var LeafIMG="images/tree/ftv2lastnode.gif";
var MlastABG="url(images/tree/OPEN.BMP) no-repeat";
var PlastABG="url(images/tree/CLOSED.BMP) no-repeat";
var LeafABG="url(images/tree/LEAF.BMP) no-repeat";
//将前台控件集的值交给javascript数组:
var ulDB=document.getElementById("UlDatas");
var liDatas=ulDB.getElementsByTagName("li"); //获得前台记录数据集的控件集
var numL=0;
for(var i=0;i<stringArr.length;i++){
for(var j=0;j<stringArr[i].length ;j++){
if( numL<liDatas.length){
stringArr[i][j]=liDatas[numL].innerText.Trim(); //赋值
numL++;
//document.write("["+i+","+j+"]::" +stringArr[i][j] + "<br>");
}else{
break; //如果超出控件集个数则终止
}
}
}
</script>
<!--树 start----------------------------->
<div class="myTree_C1">
<a id="myTreeCtrlAll" name="2" href="#">[+]</a><br />
<div id="myTree"></div>
</div>
<!--树 end------------------------------->
<script language="javascript">
/************************ 向树框架中插入内容： **********************************/
for(var i in stringArr){ //遍历所有数据记录：
thisID="J"+ stringArr[i][1]; //通过信息的levelcode生成节点id
thisContent=stringArr[i][2]; //节点显示内容
var YesLeaf=stringArr[i][3];
var anchorText=document.createTextNode(thisContent);
var newAnchor_img=document.createElement("img"); //树型图片
var newAnchor_a=document.createElement("a"); //本节点链接容器
var newAnchor_br=document.createElement("br"); //换行符
var newAnchor_div=document.createElement("div"); //本节点包含子节点的容器
var newAnchor_chx=document.createElement("input"); //节点复选框 (080602byLQ)
thisAID="a"+ thisID; //节点链接id
newAnchor_a.id=thisAID; //通过id可以间接找到div
newAnchor_a.style.paddingLeft=16;
newAnchor_a.appendChild(anchorText); //在本节点中加入显示内容
newAnchor_div.id=thisID;
newAnchor_div.style.display = "none"; //div显示方式：
thisImgID="m"+ thisID; //节点图片id
newAnchor_img.id=thisImgID; //通过id可以间接找到div
newAnchor_img.align="absmiddle";
thisChxID="x"+thisID; //节点复选框id
newAnchor_chx.id=thisChxID; //通过id可以间接找到div
newAnchor_chx.type="checkbox"; //定义为复选框
newAnchor_chx.name = "treeChkBoxes"; //树中所有复选框统一名字
//如果是叶子节点：
if(YesLeaf!=null && YesLeaf=="T"){
newAnchor_a.href="<%=ActionPage %>?id="+stringArr[i][0]; //节点指向链接【根据业务需要更改值的内容】
newAnchor_a.name="leafA"; //当是叶子节点时，<a>统一是这个名字
newAnchor_a.style.background=LeafABG;
newAnchor_img.src=LeafIMG;
newAnchor_img.name="leafImage"; //当是叶子节点时，图片统一是这个名字
//复选框赋值：
newAnchor_chx.value = stringArr[i][0]; //【根据业务需要更改值的内容】
}
//如果不是叶子节点：
else{
newAnchor_a.href="#"; //节点开合控制
newAnchor_a.name=thisID; //!注意：非常重要，通过a的name可以找到div!
newAnchor_a.style.background=PlastABG;
newAnchor_img.src=PlastIMG;
newAnchor_img.name=thisID; //当不是叶子节点时，通过img的name可以找到div!
//注意：非叶子节点的复选框为空
newAnchor_chx.value = "";
}
var parentID=getFatherID(stringArr[i][1]); //用函数获得当前节点的父项id
var parent=document.getElementById(parentID); //当前节点的父对象
//当父对象存在时，插入该节点：
if(parent){
parent.appendChild(newAnchor_img);
parent.appendChild(newAnchor_a);
parent.appendChild(newAnchor_chx);
parent.appendChild(newAnchor_br);
parent.appendChild(newAnchor_div);
}
}
/************************ 事件监听： 开始 **********************************/
var TreeA=document.getElementById("myTreeCtrlAll"); //Mother tree-a
var treeDiv=document.getElementById("myTree"); //Mother tree-div
var treeimgs=treeDiv.getElementsByTagName("img"); //img in tree-div
var treeas=treeDiv.getElementsByTagName("a"); //a in tree-div
var treedivs=treeDiv.getElementsByTagName("div"); //div in tree-div
var treeInputs=treeDiv.getElementsByTagName("input"); //input in tree-div
//遍历树myTree中的<a>对象，鼠标点击时触发下面的事件：
for (var k in treeas){
treeas[k].onclick=function(){
var e = window.event.srcElement;
var objDiv = document.getElementById(e.name); //a的name就是div的id
var imgId="m" + e.name;
var oImg = document.getElementById(imgId); //"m"+a的name = img的id
//如果不是叶子节点的<a>：
if(e.name!="leafA"){
if(objDiv.style.display=="block"){
objDiv.style.display="none";
oImg.src=PlastIMG;
e.style.background=PlastABG;
}
else if(objDiv.style.display=="none"){
objDiv.style.display="block";
oImg.src=MlastIMG;
e.style.background=MlastABG;
}
}
};
}
/***/
//遍历树myTree中的<img>对象，鼠标点击时触发下面的事件：
for (var k in treeimgs){
treeimgs[k].onclick=function(){
var e = window.event.srcElement;
var aId="a" + e.name;
//如果不是叶子节点的图片：
if(e.name!="leafImage"){
var objDiv = document.getElementById(e.name); //img的name就是div的id
var objA = document.getElementById(aId); //img的name就是div的id
if(objDiv.style.display=="block"){
objDiv.style.display="none";
e.src=PlastIMG;
objA.style.background=PlastABG;
}
else if(objDiv.style.display=="none"){
objDiv.style.display="block";
e.src=MlastIMG;
objA.style.background=MlastABG;
}
}
};
}
/***/
//遍历树myTree中的属性为checkbox的<input>对象（复选框），鼠标点击时触发下面的事件：
for (var k in treeInputs){
treeInputs[k].onclick=function(){
var e = window.event.srcElement;
if(e.type!="checkbox") return;
var Id = e.id;
var dId = Id.substring(1,Id.length)
var aId = "a" + dId;
var myA=document.getElementById(aId);
//如果点击的不是叶子项，则要向内遍历执行：
if(myA.name!="leafA"){
chksign = e.checked;
var myDiv = document.getElementById(dId);
var mySonInputs=myDiv.getElementsByTagName("input"); //input in tree-div
for(var u in mySonInputs){
if(mySonInputs[u].type=="checkbox"){
mySonInputs[u].checked = chksign;
}
}
}
//去掉直接父亲节点的勾：
// var fatherId = getFatherID(dId.substring(1,dId.length))
// fatherO = document.getElementById("x"+fatherId);
// if(fatherO)fatherO.checked=false;
};
}
/***/
//全遍历--点击树的总开关，完全打开/关闭树结构：
TreeA.onclick=function(){
//1--〉2 完全打开--〉完全关闭：
if(TreeA.name=="1"){
for (var k=0; k<treedivs.length; k++){
treedivs[k].style.display="none";
//如果不是叶子节点的图片：
if(treeimgs[k].name!="leafImage"){ treeimgs[k].src=PlastIMG;}
//如果不是叶子节点的a：
if(treeas[k].name!="leafA"){treeas[k].style.background=PlastABG;}
}
TreeA.name="2";
}
//2--〉1 完全关闭--〉完全打开：
else if(TreeA.name=="2"){
for (var k=0; k<treedivs.length; k++){
treedivs[k].style.display="block";
//如果不是叶子节点的图片：
if(treeimgs[k].name!="leafImage"){ treeimgs[k].src=MlastIMG;}
//如果不是叶子节点的a：
if(treeas[k].name!="leafA"){treeas[k].style.background=MlastABG;}
}
TreeA.name="1";
}
};
/************************ 事件监听： 结束 **********************************/
</script>
<input name="" type="submit" value="提交" />
</form>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -