IEWebControl TreeView右鍵菜單實例

2024-07-21 02:17:12

字體：大中小

供稿：網(wǎng)友

收集最實用的網(wǎng)頁特效代碼！

一個iewebcontrol treeview右鍵菜單的例子，實現(xiàn)了添加、修改和刪除功能，復(fù)制即可運行
更多treeview的客戶端操作參見
http://www.csdn.net/develop/read_article.asp?id=22100

<%@ register tagprefix="iewc" namespace="microsoft.web.ui.webcontrols" assembly="microsoft.web.ui.webcontrols, version=1.0.2.226, culture=neutral, publickeytoken=31bf3856ad364e35" %>
<html>
<head>
<title>treeview控件右鍵菜單</title>
<style>

</style>
</head>
<body onclick="hidemenu()">
<form id="treeview" method="post" runat="server">
<iewc:treeview id="treeview1" runat="server" expandlevel="3" hoverstyle="color:blue;background:#ffff00;">
<iewc:treenode text="node0" expanded="true">
<iewc:treenode text="node3">
<iewc:treenode text="node5"></iewc:treenode>
<iewc:treenode text="node6"></iewc:treenode>
</iewc:treenode>
<iewc:treenode text="node4"></iewc:treenode>
</iewc:treenode>
<iewc:treenode text="node1" expanded="true">
<iewc:treenode text="node7">
<iewc:treenode text="node8"></iewc:treenode>
</iewc:treenode>
</iewc:treenode>
<iewc:treenode text="node2" expanded="true">
<iewc:treenode text="node9"></iewc:treenode>
<iewc:treenode text="node10">
<iewc:treenode text="node11"></iewc:treenode>
<iewc:treenode text="node12"></iewc:treenode>
</iewc:treenode>
</iewc:treenode>
</iewc:treeview>
<div id="popupmenu" class="skin" onmouseover="highlighitem()" onmouseout="lowlightitem()" onclick="clickitem()">
<div class="menuitems" func="add">添加</div>
<hr>
<div class="menuitems" func="delete">刪除</div>
<div class="menuitems" func="modify">修改</div>
</div>
</form>
<script language="javascript">
var menuskin = "skin";
var node = null;

function hidemenu()
{
popupmenu.style.visibility = "hidden";
}

function highlighitem()
{
if (event.srcelement.classname == "menuitems")
{
event.srcelement.style.backgroundcolor = "highlight";
event.srcelement.style.color = "white";
}
}

function lowlightitem()
{
if (event.srcelement.classname == "menuitems")
{
event.srcelement.style.backgroundcolor = "";
event.srcelement.style.color = "black";
window.status = "";
}
}

function clickitem()
{
if (event.srcelement.classname == "menuitems")
{
if(event.srcelement.getattribute("func") == "add" && node != null)
{
var newnode=treeview1.createtreenode();
newnode.setattribute("text","new node");
node.add(newnode);
}
else if (event.srcelement.getattribute("func") == "delete" && node != null)
{
node.remove();
}
else if (event.srcelement.getattribute("func") == "modify" && node != null)
{
node.setattribute("text","hgknight");
}
}
}

function treeview1.oncontextmenu()
{
var nodeindex = event.treenodeindex;
if (typeof(nodeindex) == "undefined")
{
node = null;
return;
}

node = treeview1.gettreenode(nodeindex);

var rightedge = document.body.clientwidth-event.clientx;
var bottomedge = document.body.clientheight-event.clienty;
if (rightedge <popupmenu.offsetwidth)
{
popupmenu.style.left = document.body.scrollleft + event.clientx - popupmenu.offsetwidth;
}
else
{
popupmenu.style.left = document.body.scrollleft + event.clientx;
}
if (bottomedge <popupmenu.offsetheight)
{
popupmenu.style.top = document.body.scrolltop + event.clienty - popupmenu.offsetheight;
}
else
{
popupmenu.style.top = document.body.scrolltop + event.clienty;
}
popupmenu.style.visibility = "visible";
return false;
}

</script>
</body>
</html>