⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 demo.htm

📁 本程序用JAVASCRIPT实现了WEB页面树的多列
💻 HTM
字号:
🔍 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tree List Control v3.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" src="treelistcontrol.js"></script>
<link href="treelistcontrol.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
/*	margin: 0px;
	border: 0px;*/
}
input {
	height:12px;
}
</style>
</head>
<body bgcolor="threedface">
<script language="JavaScript">
function addone() {
	do {
		var n = Math.floor(Math.random() * (tree.allNodes.length-1))+1;
	} while(!tree.allNodes[n]);
	
	var parent = tree.allNodes[n];
	var o = new TreeListControlNode(false);
	o.setText('','<input type="checkbox">','New Node',Math.random(),
			  '<a href="javascript:removeme(' + o.ID + ');">Remove</a> | <a href="javascript:reassignme(' + o.ID + ');">Reassign</a>');
	parent.add(o);
}

function toggleheading() {
	tree.showColumnHeadings = !tree.showColumnHeadings;
}

function toggleroot() {
	tree.showRootNode = !tree.showRootNode;
}

function removeme(id) {
	tree.allNodes[id].remove();
}

function reassignme(id) {
	var node = tree.allNodes[id].remove();
	var n = Math.floor(Math.random()*2);
	if(n)
		tree.all['testnode'].insertBefore(node, false);
	else
		tree.all['testnode'].insertAfter(node, false);
}

tree = new TreeListControl('Test Tree', '');
tree.addColumn ( new TreeListControlColumn(20, '') );
tree.addColumn ( new TreeListControlColumn(20, '', true) );
tree.addColumn ( new TreeListControlColumn(250, 'Labels') );
tree.addColumn ( new TreeListControlColumn(120, 'Stuff') );
tree.addColumn ( new TreeListControlColumn(160, 'Things') );

tree.rootNode.setText('','<input type="checkbox">','My Testing Tree','','?');
tree.nLabelColumn = 2;

var node = new TreeListControlNode(true);
node.setText('<b style="color:red; font-size:10pt;">&#9642;</b>','<input type="checkbox">','gG','2','3');
tree.add(node);

var node2 = new TreeListControlNode(false, null, 'invalid.text');
node2.setText('','<input type="checkbox">','Hy','5','6');
node.add(node2);

var node3 = new TreeListControlNode(true);
node3.setText('<b style="color:red; font-size:10pt;">&#9642;</b>','<input type="checkbox">','7','8','Oranges And Apples Are Fun');
node.insertBefore(node3);

var node4 = new TreeListControlNode(true);
node4.setText('<b style="color:red; font-size:10pt;">&#9642;</b>','<input type="checkbox">','a','b','c');
node2.insertBefore(node4);

var node5 = new TreeListControlNode(true);
node5.setText('','<input type="checkbox">','x','y','z');
node4.add(node5);

var node6 = new TreeListControlNode(true);
node6.setText('','<input type="checkbox">','a','b','c');
node3.add(node6);

var node7 = new TreeListControlNode(true,'',null,'testnode');
node7.setText('<b style="color:red; font-size:10pt;">&#9642;</b>','<input type="checkbox">','Reassignment Point','e','f');
node6.add(node7);

var node8 = new TreeListControlNode(false,null,'http://top01wdt1:8090/workspace/test.xml');
node8.setText('','<input type="checkbox">','d','e','f');
node7.add(node8);

node8 = new TreeListControlNode(false,null,'test.xml'); //http://top01wdt1:8090/workspace/
node8.setText('','<input type="checkbox">','g','h','i');
node7.add(node8);

document.write(tree);

</script>
<button onclick="addone();">Add One</button>
<button onclick="toggleheading();">Show/Hide Heading</button>
<button onclick="toggleroot();">Show/Hide Root</button>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -