高分求jsp、js树

bhgu 2005-05-26 06:22:00

哪位高手有关于jsp、js的树结构程序，本人比较着急。
-[] 根root
|
+[]节点一
|
|
-[]节点二
|
+[]节点三
|
|-[]叶子一
|-[]叶子二

需要能够实现上图的结构，
1。节点可以无限向下扩展（如：root--->节点二--->节点三--->节点四......);
2。对节点分别进行选择和取消选择后，此节点下的所有叶子和节点均分别被选择和取消（如节点二的”复选框“被选中，则节点三及其下面的叶子和节点均被选择，叶子一和叶子二也被选择；节点二的复选框取消选择后，则节点三及其下面的叶子和节点均不被选择，叶子一和叶子二也不被选择；）；
3。可以节点和叶子进行处理，而不影响同级别的叶子和节点的状态。
谢谢

...全文

162 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

gubaohua 2005-06-08

打赏
举报

根据需要自己看懂后改改

gubaohua 2005-06-08

打赏
举报

// Definition of class Item (a document or link inside a Folder)
// *************************************************************

function Item(itemDescription, itemLink) // Constructor
{
// constant data
this.desc = itemDescription
this.link = itemLink
this.id = -1 //initialized in initalize()
this.navObj = 0 //initialized in render()
this.iconImg = 0 //initialized in render()
this.iconSrc = "./tree/doc.gif"
// add by xgm
this.parent = 0
this.values = new Array
this.leaf = 0
this.nodekind = "node"

// methods
this.initialize = initializeItem
this.createIndex = createEntryIndex
this.hide = hideItem
this.display = display
this.renderOb = drawItem
this.totalHeight = totalHeight
this.outputLink = outputItemLink
this.setDesc = setDescription
}

function setDescription(NewDesc){
this.leaf.innerHTML = NewDesc
}

function hideItem()
{
if (this.navObj.style.display == "none"){
return
}
this.navObj.style.display = "none"

}

function initializeItem(level, lastNode, leftSide)
{
this.createIndex()

if (level>0){
if (lastNode) {
this.renderOb(leftSide + "<img style='vertical-align: middle;' src='./tree/L.png'>")
leftSide = leftSide + "<img style='vertical-align: middle;' src='./tree/blank.gif'>"
}else {
this.renderOb(leftSide + "<img style='vertical-align: middle;' src='./tree/T.png'>")
leftSide = leftSide + "<Img style='vertical-align: middle;' src='./tree/I.png'>"
}
}else{
this.renderOb("")
}
}

function drawItem(leftSide)
{
doc.write("<div ")

doc.write(" id='item" + this.id + "' style='padding: 0px;margin: 0px;white-space: nowrap;'> ")
doc.write(leftSide)
doc.write("<img style='vertical-align: middle;' id='itemIcon"+this.id+"' ")
doc.write("src='"+this.iconSrc+"' border=0>")
if(this.link){
doc.write("<a href='"+this.link+"'>"+this.desc+"</a>")
}else{
doc.write(this.desc);
}
doc.write("</div>")

this.navObj = doc.all["item"+this.id]
this.iconImg = doc.all["itemIcon"+this.id]
this.leaf = doc.all["leaf"+this.id]
}

// Methods common to both objects (pseudo-inheritance)
// ********************************************************

function display()
{
this.navObj.style.display = "block"
}

function createEntryIndex()
{
this.id = nEntries
indexOfEntries[nEntries] = this
nEntries++
}

// total height of subEntries open
function totalHeight() //used with browserVersion == 2
{
var h = this.navObj.clip.height
var i = 0

if (this.isOpen) //is a folder and _is_ open
for (i=0 ; i < this.nChildren; i++)
h = h + this.children[i].totalHeight()

return h
}

// Events
// *********************************************************

function clickOnFolder(folderId)
{
var clicked = indexOfEntries[folderId]
alert(folderId+" "+clicked);

//if (!clicked.isOpen) //removed by xgm
clickOnNode(folderId)

return

if (clicked.isSelected)
return
}

function clickOnNode(folderId)
{
alert(folderId);
var clickedFolder = 0
var state = 0
var s
clickedFolder = indexOfEntries[folderId]
alert(clickedFolder.nodekind);
if (clickedFolder.nodekind == "folder"){
state = clickedFolder.isOpen
clickedFolder.setState(!state) //open<->close
}
if (clickedFolder.nodekind=="node"){
if (clickedFolder != currentNode){
if (currentNode.leaf){
currentNode.leaf.innerHTML = "<span style='{background-color: transparent;font-size:10.5pt;color:#000000}'>"+currentNode.leaf.innerText+"</span>"
currentNode.leaf.style.backgroundColor = "transparent"
}
clickedFolder.leaf.innerHTML = "<span style='{background-color: #0099ff;font-size:10.5pt;color:#ffffff}'>"+clickedFolder.leaf.innerText+"</span>"
clickedFolder.leaf.style.backgroundColor = "#0099ff"
currentNode = clickedFolder
}
if (typeof(clickToNavigate)=="function"){
clickToNavigate(clickedFolder)
}
}
}

function initializeDocument()
{
if (doc.all){
browserVersion = 1 //IE4
}else {
if (doc.layers){
browserVersion = 2 //NS4
}else {
browserVersion = 0 //other
}
}
foldersTree.initialize(0, 1, "") ;
if (browserVersion > 0) {
// close the whole tree
clickOnNode(0);
// open the root folder
clickOnNode(0);
}
}

function gFld(description, hreference) {
folder = new Folder(description, hreference)
return folder
}

// Global variables
// ****************

var USETEXTLINKS = 1
var indexOfEntries = new Array
var nEntries = 0
var doc = document
var browserVersion = 0
var selectedFolder=0
var currentNode=0

</script>
<style>
body { background: white; color: black; }
input { width: 120px; }
</style>
</head>
<body>
<script language=javascript>
showTree();
initializeDocument();

function showTree(){

foldersTree=gFld("<b><IMG src=\"home.gif\"><FONT face=\"宋体\">系统菜单</FONT></b>");
recv=foldersTree.addChild(new Folder("fold1"));
curNode = recv.addChild(new Folder("1"));
curNode.addChild(new Item("1"));
curNode.addChild(new Item("2"));
recv.addChild(new Item("bhgu","bhgu.jsp"))

recv=foldersTree.addChild(new Folder("fold2"));
aa=recv.addChild(new Folder("1","selef.jsp"));
aa.addChild(new Item("1"));
aa.addChild(new Item("2","aaa.jsp"));
}

</script>
<textarea id=xxx STYLE="ime-mode: ACTIVE"></textarea><button onclick="bclick()">取内容</button>
<script language=javascript>
function bclick(){
document.all.xxx.value = document.body.innerHTML;
}
</script>
<INPUT TYPE=TEXT NAME=Std_Date4 STYLE="WIDTH:85; IME-MODE:INACTIVE">
</body>
</html>

gubaohua 2005-06-08

打赏
举报

看看这个
<html>
<head>
<script language="javascript">
function Folder(folderDescription, hreference) //constructor
{
//constant data
this.desc = folderDescription
this.hreference = hreference
this.id = -1
this.navObj = 0
this.iconImg = 0
this.nodeImg = 0
this.isLastNode = 0

//dynamic data
this.isOpen = true
this.iconSrc = "./tree/openfoldericon.png"
this.children = new Array
this.nChildren = 0
//add by XGM
this.parent = 0
this.values = new Array
this.leaf = 0
this.nodekind = "folder"

//methods
this.initialize = initializeFolder
this.setState = setStateFolder
this.addChild = addChild
this.createIndex = createEntryIndex
this.hide = hideFolder
this.display = display
this.renderOb = drawFolder
this.totalHeight = totalHeight
this.subEntries = folderSubEntries
this.outputLink = outputFolderLink
this.setDesc = setDescription
}

function initializeFolder(level, lastNode, leftSide)
{
var j=0
var i=0
var numberOfFolders
var numberOfDocs
var nc

nc = this.nChildren
this.createIndex()
var auxEv = ""
if (level>0){
if (lastNode) {
this.renderOb(leftSide + auxEv + "<img style='vertical-align: middle;' name='nodeIcon" + this.id + "' src='./tree/Lminus.png' border=0>")
leftSide = leftSide + "<img style='vertical-align: middle;' src='./tree/blank.gif'>"
this.isLastNode = 1
}else{
this.renderOb(leftSide + auxEv + "<img style='vertical-align: middle;' name='nodeIcon" + this.id + "' src='./tree/Tminus.png' border=0>")
leftSide = leftSide + "<img style='vertical-align: middle;' src='./tree/I.png'>"
this.isLastNode = 0
}
}else {
this.renderOb("")
}
if (nc > 0){
level = level + 1
for (i=0 ; i < this.nChildren; i++) {
if (i == this.nChildren-1){
this.children[i].initialize(level, 1, leftSide)
}else{
this.children[i].initialize(level, 0, leftSide)
}
}
}
}

function setStateFolder(isOpen)
{
var subEntries
var totalHeight
var fIt = 0
var i=0

if (isOpen == this.isOpen){
return
}
this.isOpen = isOpen
propagateChangesInState(this)
}
function propagateChangesInState(folder)
{
var i=0

if (folder.isOpen){
if (folder.nodeImg){
if (folder.isLastNode){
folder.nodeImg.src = "./tree/Lminus.png"
}else{
folder.nodeImg.src = "./tree/Tminus.png"
}
}
folder.iconImg.src = "./tree/openfoldericon.png"
for (i=0; i<folder.nChildren; i++){
folder.children[i].display()
}
}else{
if (folder.nodeImg){
if (folder.isLastNode){
folder.nodeImg.src = "./tree/Lplus.png"
}else{
folder.nodeImg.src = "./tree/Tplus.png"
}
}
folder.iconImg.src = "./tree/foldericon.png"
for (i=0; i<folder.nChildren; i++){
folder.children[i].hide()
}
}
}

function hideFolder()
{

if (this.navObj.style.display == "none"){
return
}
this.navObj.style.display = "none"
this.setState(0)
}

function drawFolder(leftSide)
{
doc.write("<div")
doc.write(" id='folder" + this.id + "' style='padding: 0px;margin: 0px;white-space: nowrap;'> ")
doc.write(leftSide)
doc.write("<img style='vertical-align: middle;padding: 0px;margin: 0px;' name='folderIcon" + this.id + "' style='{cursor:hand}' ")
doc.write("src='" + this.iconSrc+"' border=0 onclick='javascript:clickOnNode("+this.id+")'>")
if(this.hreference){
doc.write("<a href='"+this.hreference+"'>"+this.desc+"</a>")
}else{
doc.write(this.desc);
}
doc.write("</div>");
this.navObj = doc.all["folder"+this.id]
this.iconImg = doc.all["folderIcon"+this.id]
this.nodeImg = doc.all["nodeIcon"+this.id]
this.leaf = doc.all["leaf"+this.id]
}

function outputFolderLink(i) {

}
function outputItemLink(i) {

}
function addChild(childNode)
{
this.children[this.nChildren] = childNode
this.nChildren++
childNode.parent = this
return childNode
}

function folderSubEntries()
{
var i = 0
var se = this.nChildren

for (i=0; i < this.nChildren; i++){
if (this.children[i].children){
se = se + this.children[i].subEntries()
}
}
return se
}

MARS.nEIL 2005-05-27