用脚本也可实现
<script language="javascript">
function switchstatus(obj){
if (document.all(obj).style.display=='none'){
document.all(obj).style.display='block';}
else
{document.all(obj).style.display='none'; }
}
</script><table>
<tr>
<td ><a href="#" onclick="javascript:switchstatus('M1');">111</a></td>
</tr>
<tbody id="M1" style="Display:none">
<tr>
<td >111111111111</td>
</tr>
<tr>
<td >222222222222</td>
</tr>
</tbody>
<tr>
<td ><a href="#" onclick="javascript:switchstatus('M2');">111</a></td>
</tr>
<tbody id="M2" style="Display:none">
<tr>
<td >3333333333333</td>
</tr>
<tr>
<td >44444444444</td>
</tr>
<tr>
<td >5555555</td>
</tr>
</tbody>
<script language="javascript">
function switchstatus(obj){
if (document.all(obj).style.display=='none'){
document.all(obj).style.display='block';}
else
{document.all(obj).style.display='none'; }
}
</script><table>
<tr>
<td ><a href="#" onclick="javascript:switchstatus('M1');">111</a></td>
</tr>
<tbody id="M1" style="Display:none">
<tr>
<td >111111111111</td>
</tr>
<tr>
<td >222222222222</td>
</tr>
</tbody>
<tr>
<td ><a href="#" onclick="javascript:switchstatus('M2');">111</a></td>
</tr>
<tbody id="M2" style="Display:none">
<tr>
<td >3333333333333</td>
</tr>
<tr>
<td >44444444444</td>
</tr>
<tr>
<td >5555555</td>
</tr>
</tbody>
它有说明,但我看不懂!说明这样:
树的代码如下:
<html>
<body>
<%
Dim oTree, ParentID, Cn, Rs
Set oTree = Server.CreateObject("obout_ASPTreeview_2.Tree")
oTree.FolderIcons = "/TreeIcons/Icons"
oTree.FolderStyle = "/TreeIcons/Styles/Classic"
oTree.AddRootNode "Hello, I am Root node!" Set Cn = Server.CreateObject("ADODB.Connection")
Cn.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("DEMO.mdb")
Cn.Open
Set Rs = Server.CreateObject("ADODB.Recordset")
Rs.Open "SELECT * FROM tree ORDER BY parent, id", Cn, 0, 3 ' Populate TreeView in one loop.
Do Until Rs.EOF
If IsNull(Rs("PARENT")) Then
ParentID = "root"
Else
ParentID = "id" & Rs("PARENT") ' ID should start with character.
End If oTree.Add ParentID, "id" & Rs("ID"), Rs("HTML"), Rs("EXPANDED"), Rs("ICON")
Rs.MoveNext
Loop Response.Write oTree.HTML() Set oTree = Nothing
Rs.Close
Set Cn = Nothing
%></body>
</html>
要得到节点说明如下:
Find selected id on client side. See server side here. <input type=button value="Show selected_node_id"
onclick="document.getElementById('txtId').value=tree_selected_id;
document.getElementById('txtText').value =
document.getElementById(tree_selected_id).innerHTML;">
alert(tree_selected_id);
alert(document.getElementById(tree_selected_id).innerHTML);
alert(tree_parent_id);
alert(tree_selected_path);
How to to get the Id on clicking node instead of clicking button Edit file obout_treeview.js located in folder TreeIcons/Icons/
Insert any code at the bottom of function ob_t22function ob_t22(ob_od) {
...
...
...
document.getElementById('txtId').value=tree_selected_id;
}
function ob_t22(ob_od) {
// Highlight selected node
// Change class name and assign id to variable tree_selected_id
if (ob_od.id == "") return;
// EVENT. Before node is selected. // the previously selected node
prevSelected = document.getElementById(tree_selected_id);
// for edit mode only
if ((prevSelected != null)&&typeof(ob_tree_editnode_enable) != 'undefined'&&(ob_tree_editnode_enable==true))
{
ob_attemptEndEditing(ob_od);
}
if(ob_prev_selected!=null)
{
ob_prev_selected.className = "ob_t2";
}
ob_prev_selected = ob_od;
ob_od.className = "ob_t3";
// for edit mode only
if (typeof(ob_tree_editnode_enable) != 'undefined'&&ob_tree_editnode_enable==true){ob_attemptStartEditing(ob_od)};
// store the current node id as the last selected node
tree_selected_id = ob_od.id;
// Find path to selected and extend the path
var sel_id;
if(ob_od.parentNode.parentNode.parentNode.parentNode.parentNode.className=="ob_di2"){return};
ob_od = ob_od.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.firstChild.firstChild.firstChild.firstChild.nextSibling.nextSibling;
tree_parent_id = ob_od.id;
tree_selected_path = tree_parent_id+","+tree_selected_id;
ob_t20(ob_od);
// EVENT. After node is selected.
}哈哈,帮帮忙!!
每个项都在一个TR里面,<span id="menu_name"><TR></tr></span> 找到该对象就可以隐藏/显示对应菜单,实现父子菜单形式如下:
<span id=parent style="display:;">
<span id=child1 style="display:none;"><tr>...</tr></span>
<span id=child2 style="display:;"><tr>...</tr></span>
</span>记忆打开/隐藏状态,用一个全局的字符串或者数组,数组好一些显示时对应的缩进,用CSS来实现