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

📄 treetest.htm

📁 DWR与界面开发 ,对ajax感兴趣的可以看看哦
💻 HTM
字号:
🔍 
<html>
<head>
<title>如何使用 Binary Star 树控件</title>
<link href="../css/bs.css" rel="stylesheet" type="text/css">
<style>
body{font-family: verdana;font-size: 9pt;}
table{font-family: verdana;font-size: 9pt;}
a{font-family: verdana;font-size: 9pt;color: blue;}
.table_a{border: #bababa 1px solid;border-top: White 0px solid;}
.table_b{border-left: #bababa 1px solid;}
.table_c{border: #bababa 1px solid;}
.table_d{border-bottom:#bababa 1px solid;}
.td_a{background:url(../images/qq.gif);background-repeat:repeat-x;}
.td_b{border-right: #bababa 1px solid; width:150px;}
.button_a{cursor: hand;}
.h1{font-family: verdana;font-weight: normal;font-size: 9pt;color:blue;}
.h1_1{font-family: verdana;font-weight: normal;font-size: 9pt;color:black;}
.h2{font-family: verdana;font-weight: normal;font-size: 9pt;color:red;}
.h2_2{font-family: verdana;font-weight: normal;font-size: 9pt;color:green;}
.h3{font-family: verdana;font-weight: bold;font-size: 10pt;}
</style>
<SCRIPT language=javascript src="../js/bs.js"></SCRIPT>
<SCRIPT language=javascript src="../js/bsrightmenu.js"></SCRIPT>
<SCRIPT language=javascript src="../js/treeview.js"></SCRIPT>
<SCRIPT language=javascript>
var seq=0;
var Test_tree = new BSTreeView("Test_tree", "frmBusiness", false, "", "");
Test_tree.setImagesPath("../images/");
Test_tree.setShowLine(true);

function doSetNode(){
  //更改节点文字
  Test_tree.getNodeByName("jre").setShowStr("更改节点文字");
}
function doAddNode(){
  Test_tree.setFinish(false);
  alert("该操作将在src的\n\rcommon.framework.core.config\n\r下添加一个包名为\n\rnewpage_"+seq);
  Test_tree.getNodeByName("common.framework.core.config").addNode("page_"+seq, "common.framework.core.config.newpage_"+seq, "delSelNode()", "", "", false, false, -1, "package.gif", "package.gif", "package.gif");
  Test_tree.setFinish(true);
  seq++;
}
function delSelNode(){
  alert("该操作将删除您选中的节点！");
  Test_tree.getSelectNode().remove();
}
function doChangeNode(fName, tName){
  alert("将"+fName+"节点及其子节点调度到"+tName+"节点下！");
  var fNode = Test_tree.getNodeByName(fName);
  var tNode = Test_tree.getNodeByName(tName);
  fNode.remove();
  tNode.addOneNode(fNode.id);
}
function doSearchNodes(inName){
  alert("查找显示内容匹配\""+inName+"\"的所有节点！");
  var resNodes =  Test_tree.searcNodesByText(inName);
  for (var i=0; i<resNodes.length; i++){
  	if (i==0){
  		resNodes[i].setNodeActive();
  	}
    alert(resNodes[i].showStr);
  }
}
function doSearchChildNodes(inName){
  alert("查找显示内容匹配\""+inName+"\"的所有子节点！");
  var resNodes =  Test_tree.getSelectNode().searcNodesByText(inName);
  for (var i=0; i<resNodes.length; i++){
  	if (i==0){
  		resNodes[i].setNodeActive();
  	}
    alert(resNodes[i].showStr);
  }
  
}


</SCRIPT>
</head>
<body leftMargin="0" topMargin="0" rightMargin="0" scroll="auto">
<form method="post" name="frmBusiness" target="Test_tree_frame"><b><a
	name="目录"></a> 
	<span>[<a href="../index.htm">回首页</a>]</span>&nbsp;&nbsp; 
	<span>[<a href="#实例展现">实例展现</a>]</span> 
	<span>[<a href="#实现步骤">实现步骤</a>]</span>&nbsp;&nbsp;
	<span>[<a href="object.htm">常用方法属性</a>]</span>
	</b>
<br />
<br />
<ul>
	<b><a name="对象结构"></a>
	<li><span class="h3">树对象由两个类组成：BSTreeView和BSNode</span><br />
	<span class="h1"><b>BSTreeView：</b></span><span
		class="h1_1">树控件对象，封装树的操作及子节点维护。</span><br />
	<span class="h1"><b>BSNode：</b></span><span
		class="h1_1">右键菜单块，封装一个右键块，供不同的控件使用。</span><br />
	<span class="h3"><b>注：树控件集成了右键菜单。缺省右键菜单对象名为：树名+"_rm"<br /></li>
	</b>
	<br />
	<br />
	<b><a name="实例展现"></a>
	<li><span class="h3">实例展现：&nbsp;&nbsp;[<a href="#目录">目录</a>]</span><br />
	<span class="h3">式样
	<table>
		<tr>
			<td><input type="button" class="button" onclick="doSetNode()"
				value="修改节点文字" /></td>
			<td><input type="button" class="button" onclick="doAddNode()"
				value="添加子节点" /></td>
			<td><input type="button" class="button"
				onclick="doChangeNode('src', 'WebRoot')" value="调度子节点" /></td>
			<td><input type="button" class="button" onclick="doSearchNodes('c')"
				value="模糊查询节点" /></td>
			<td style="width:100%;">&nbsp;</td>
		</tr>
		<tr>
			<td style="width:100%;" valign="top" colspan="5">
			<div style="width:400;height:250px;overflow:auto"><SCRIPT
				language="JavaScript">
		var SPSnode = Test_tree.addRootNode("SPS", "SPS", "", "", "", true, false, -1, "open.gif", "close.gif", "close.gif");
		var cNode = SPSnode.addNode("src", "src", "", "", "", false, false, -1, "open.gif", "close.gif", "java.jsp");
		SPSnode.addNode("jre", "JRE System Library [MyEclpse]", "", "", "", false, false, -1, "jsptaglib.gif", "jsptaglib.gif", "jsptaglib.gif");
		var node = cNode.addNode("com.timesontransfar", "com.timesontransfar", "doSearchChildNodes('t')", "", "", false, false, -1, "package.gif", "package.gif", "package.gif");
		node.addNode("common.framework.core.config", "common.framework.core.config", "", "", "", false, false, -1, "package_obj.gif", "package_obj.gif", "package_obj.gif");
		cNode = node.addNode("crm", "crm", "", "", "", false, false, -1, "package.gif", "package.gif", "package.gif");
		cNode.addNode("java", "test.java", "", "", "", false, false, -1, "java.gif", "java.gif", "java.gif");
		node.addNode("sps", "sps", "", "", "", true, false, -1, "package.gif", "package.gif", "package.gif");
		cNode = node.addNode("ApplicationResources.properties", "ApplicationResources.properties", "", "", "", false, false, -1, "file.gif", "file.gif", "file.gif");

		node = SPSnode.addNode("WebRoot", "WebRoot", "", "", "", false, false, -1, "open.gif", "close.gif", "close.gif");
		node.addNode("jsp", "index.jsp", "", "", "", false, false, -1, "jsp_file.gif", "jsp_file.gif", "jsp_file.gif");
		cNode = node.addNode("WEB-INF", "WEB-INF", "", "", "", false, false, -1, "open.gif", "close.gif", "close.gif");
		node = cNode.addNode("web.xml", "web.xml", "", "", "", false, false, -1, "xml_file.gif", "xml_file.gif", "xml_file.gif");
		Test_tree.DrawTree(true);
		</SCRIPT></div>
			</td>
		</tr>
	</table>
	</span> <br />
	<br />
	<li><b><a name="实现步骤"></b></a> <span class="h3">实现步骤：&nbsp;&nbsp;[<a href="#目录">目录</a>]</span><br/>
	</br>
	<table  align="left" style="width:100%" border="0"
		cellpadding="0" cellspacing="0">
		<tr><td>
			<table align="left" style="width:700px;" class="table_a" border="0"
				cellpadding="0" cellspacing="0">
				<tr>
					<td height="25px" style="" align="left" class="td_a" colspan="5">&nbsp;步骤一：定义树&nbsp;
					</td>
				</tr>
				<tr>
					<td height="20px" valign="top"><br />
					<span class="h2_2">//定义并初始化树</span><br/>
					<span class="h2_2">/*参数：</span><br/>
					<span class="h2_2">*	1、树的名称</span><br/>
					<span class="h2_2">*	2、form名称。没有可以为空</span><br/>
					<span class="h2_2">*	3、是否为即点即查树。</span><br/>
					<span class="h2_2">*	4、树的式样ID，暂填为""</span><br/>
					<span class="h2_2">*	5、加载该树的父元素名。</span><br/>
					<span class="h2_2">*注意事项：</span><br/>
					<span class="h2_2">*	1、实例名要和树的名称相同。</span><br/>
					<span class="h2_2">*	2、如果树包含在from中，则建议填入第二个参数。</span><br/>
					<span class="h2_2">*	3、如果树的声明在body中，可以不用设置最后一个参数。</span><br/>
					<span class="h2_2">*/</span><br/>
					<b>
					var Test_tree = new BSTreeView("Test_tree", "frmBusiness", false, "", "");<br/>
					Test_tree.setImagesPath("../images/");<span class="h2_2">//设置图片路径</span><br/>
					Test_tree.setShowLine(true);<span class="h2_2">//设置树是否需要连线</span><br/>
				        </b><br/>
					</td>
				</tr>
			</table>
		</td></tr>
		<tr><td>&nbsp;</td></tr>
		<tr><td>
			<table align="left" style="width:700px;" class="table_a" border="0"
				cellpadding="0" cellspacing="0">
				<tr>
					<td height="25px" style="" align="left" class="td_a" colspan="5">&nbsp;步骤二：添加根节点&nbsp;
					</td>
				</tr>
				<tr>
					<td height="20px" valign="top"><br />
					<span class="h2_2">//为树添加根节点</span><br/>
					<span class="h2_2">/*参数：1、关键字</span><br/>
					<span class="h2_2">*	2、显示文字。</span><br/>
					<span class="h2_2">*	3、点击节点执行的JS方法。</span><br/>
					<span class="h2_2">*	4、打开/关闭节点执行额外的JS方法。</span><br/>
					<span class="h2_2">*	5、该节点存放的参数。</span><br/>
					<span class="h2_2">*	6、该节点是否打开。</span><br/>
					<span class="h2_2">*	7、该节点是否已经执行过打开节点的操作。</span><br/>
					<span class="h2_2">*	8、该节点的右键菜单项索引。</span><br/>
					<span class="h2_2">*	9、该节点打开状态下的图片：建议16*16</span><br/>
					<span class="h2_2">*   10、该节点关闭状态下的图片：建议16*16</span><br/>
					<span class="h2_2">*   11、该节点为叶子时的图片：建议16*16</span><br/>
					<span class="h2_2">*/</span><br/>
					<b>var SPSnode = Test_tree.addRootNode("SPS", "SPS", "Test_tree.getSelectNode().expand()", "", "", true, false, -1, "open.gif", "close.gif", "close.gif");<br/>
					</b><br/></td>
				</tr>
			</table>
		</td></tr>
		<tr><td>&nbsp;</td></tr>
		<tr><td>
			<table align="left" style="width:700px;" class="table_a" border="0"
				cellpadding="0" cellspacing="0">
				<tr>
					<td height="25px" style="" align="left" class="td_a" colspan="5">&nbsp;步骤三：为已有节点添加子节点&nbsp;
					</td>
				</tr>
				<tr>
					<td height="20px" valign="top"><br />
					<span class="h2_2">//为树节点添加子节点</span><br/>
					<span class="h2_2">/*参数：1、关键字</span><br/>
					<span class="h2_2">*	2、显示文字。</span><br/>
					<span class="h2_2">*	3、点击节点执行的JS方法。</span><br/>
					<span class="h2_2">*	4、打开/关闭节点执行额外的JS方法。</span><br/>
					<span class="h2_2">*	5、该节点存放的参数。</span><br/>
					<span class="h2_2">*	6、该节点是否打开。</span><br/>
					<span class="h2_2">*	7、该节点是否已经执行过打开节点的操作。</span><br/>
					<span class="h2_2">*	8、该节点的右键菜单项索引。</span><br/>
					<span class="h2_2">*	9、该节点打开状态下的图片：建议16*16</span><br/>
					<span class="h2_2">*   10、该节点关闭状态下的图片：建议16*16</span><br/>
					<span class="h2_2">*   11、该节点为叶子时的图片：建议16*16</span><br/>
					<span class="h2_2">*/</span><br/>
					<b>var cNode = SPSnode.addNode("src", "src", "", "", "", false, false, -1, "open.gif", "close.gif", "java.jsp");<br/>
					</b><br/></td>
				</tr>
			</table>
		</td></tr>
		<tr><td>&nbsp;</td></tr>
		<tr><td>
			<table align="left" style="width:700px;" class="table_a" border="0"
				cellpadding="0" cellspacing="0">
				<tr>
					<td height="25px" style="" align="left" class="td_a" colspan="5">&nbsp;步骤四：展现树&nbsp;
					</td>
				</tr>
				<tr>
					<td height="20px" valign="top"><br />
					<span class="h2_2">/*注意事项：</span><br/>
					<span class="h2_2">*	1、可以在树初始化的时候就执行该语句。</span><br/>
					<span class="h2_2">*/</span><br/>
					<b>Test_tree.DrawTree(true);<br/>
					<b></td>
				</tr>
			</table>
		</td></tr>
		<tr><td>&nbsp;</td></tr>
		<tr><td><span class="h3">[<a href="#目录">目录</a>]</span></td></tr>
		<tr><td>&nbsp;</td></tr>
	</table>
	</li>
</ul>
</form>
</body>
</html>

⌨️ 快捷键说明

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