上接扩展GridView控件(9) - 给数据行增加右键菜单-优快云博客

本文介绍了一种使用JavaScript实现上下文菜单的方法，包括菜单项的创建、显示与隐藏功能，并详细解释了如何通过修改样式来改变菜单项的状态。

上接>>

5、新建一个JavaScriptConstant类，把我们要用到的javascript存在一个常量里

using System;

using System.Collections.Generic;

using System.Text;

namespace YYControls.SmartGridView

{

/// <summary>

/// javascript

/// </summary>

public class JavaScriptConstant

{

internal const string jsContextMenu = @"<script type=""text/javascript"">

//<![CDATA[

// 数据行的ClientId

var _rowClientId = '';

// 以下实现右键菜单，网上找的，不知道原创是谁

function contextMenu()

{

this.items = new Array();

this.addItem = function (item)

{

this.items[ this.items.length] = item;

}

this.show = function (oDoc)

{

var strShow = '';

var i;

// 加上word-break: keep-all; 防止菜单项换行

strShow = ""<div id='rightmenu' style='word-break: keep-all;BACKGROUND-COLOR: #ffffff; BORDER: #000000 1px solid; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; Z-INDEX: 10'>"";

strShow += ""<table border='0' height='"";

strShow += this.items.length * 20;

strShow += ""' cellpadding='0' cellspacing='0'>"";

strShow += ""<tr height='3'><td bgcolor='#d0d0ce' width='2'></td><td>"";

strShow += ""<table border='0' width='100%' height='100%' cellpadding=0 cellspacing=0 bgcolor='#ffffff'>"";

strShow += ""<tr><td bgcolor='#d0d0ce' width='23'></td><td><img src=' ' height='1' border='0'></td></tr></table>"";

strShow += ""</td><td width='2'></td></tr>"";

strShow += ""<tr><td bgcolor='#d0d0ce'></td><td>"";

strShow += ""<table border='0' width='100%' height='100%' cellpadding=3 cellspacing=0 bgcolor='#ffffff'>"";

oDoc.write(strShow);

for(i=0; i< this.items.length; i++)

{

this.items[i].show(oDoc);

}

strShow = ""</table></td><td></td></tr>"";

strShow += ""<tr height='3'><td bgcolor='#d0d0ce'></td><td>"";

strShow += ""<table border='0' width='100%' height='100%' cellpadding=0 cellspacing=0 bgcolor='#ffffff'>"";

strShow += ""<tr><td bgcolor='#d0d0ce' width='23'></td><td><img src=' ' height='1' border='0'></td></tr></table>"";

strShow += ""</td><td></td></tr>"";

strShow += ""</table></div>\n"";

oDoc.write(strShow);

}

function contextItem(text, icon, cmd, url, target, type)

{

this.text = text ? text : '';

this.icon = icon ? icon : '';

this.cmd = cmd ? cmd : '';

this.url = url ? url : '';

this.target =target ? target : '';

this.type = type ? type : 'Link';

this.show = function (oDoc)

{

var strShow = '';

if( this.type == 'Link' || this.type == 'Command')

{

strShow += ""<tr "";

strShow += ""onmouseover=\""changeStyle( this, 'on');\" " "";

strShow += ""onmouseout=\""changeStyle( this, ' out');\" " "";

if ( this.type == 'Command')

{

// 右键菜单是按钮类型，调用所对应的按钮的click事件

strShow += ""onclick=\""document.getElementById("";

strShow += ""_rowClientId + "";

strShow += ""'_"";

strShow += this.cmd;

strShow += ""').click()"";

}

else

{

// 右键菜单是链接类型

if ( this.target == 'Top') this.target = 'top';

if ( this.target == 'Self') this.target = 'self';

if ( this.target == 'top' || this.target == 'self')

{

strShow += ""onclick=\"""";

strShow += this.target;

strShow += "".location='"";

strShow += this.url;

strShow += ""'"";

}

else

{

strShow += ""onclick=\""window.open('"";

strShow += this.url;

strShow += ""')"";

}

strShow += ""\"">"";

strShow += ""<td class='ltdexit' width='16'>"";

if ( this.icon == '')

{

strShow += ' ';

}

else

{

strShow += ""<img border='0' src='"";

strShow += this.icon;

strShow += ""' width='16' height='16' style='POSITION: relative'></img>"";

}

strShow += ""</td><td class='mtdexit'>"";

strShow += this.text;

strShow += ""</td><td class='rtdexit' width='5'> </td></tr>"";

}

// 右键菜单是分隔线

else if ( this.type == 'Separator')

{

strShow += ""<tr><td class='ltdexit'> </td>"";

strShow += ""<td class='mtdexit' colspan='2'><hr color='#000000' size='1'></td></tr>"";

}

oDoc.write(strShow);

}

function changeStyle(obj, cmd)

{

if(obj)

{

try

{

var imgObj = obj.children(0).children(0);

if(cmd == 'on')

{

obj.children(0).className = 'ltdfocus';

obj.children(1).className = 'mtdfocus';

obj.children(2).className = 'rtdfocus';

if(imgObj)

{

if(imgObj.tagName.toUpperCase() == 'IMG')

{

imgObj.style.left = '-1px';

imgObj.style.top = '-1px';

}

else if(cmd == ' out')

{

obj.children(0).className = 'ltdexit';

obj.children(1).className = 'mtdexit';

obj.children(2).className = 'rtdexit';

if(imgObj)

{

if(imgObj.tagName.toUpperCase() == 'IMG')

{

imgObj.style.left = '0px';

imgObj.style.top = '0px';

}

catch (e) {}

}

function showMenu(rowClientId)

{

_rowClientId = rowClientId;

var x, y, w, h, ox, oy;

x = event.clientX;

y = event.clientY;

var obj = document.getElementById('rightmenu');

if (obj == null)

return true;

ox = document.body.clientWidth;

oy = document.body.clientHeight;

if(x > ox || y > oy)

return false;

w = obj.offsetWidth;

h = obj.offsetHeight;

if((x + w) > ox)

x = x - w;

if((y + h) > oy)

y = y - h;

// obj.style.posLeft = x + document.body.scrollLeft;

// obj.style.posTop = y + document.body.scrollTop;

// xhtml不支持上面的了

// 就是说如果你的页头声明了页是xhtml的话就不能用上面那句了，vs2005创建的aspx会默认加上xhtml声明

// 此时应该用如下的方法

obj.style.posLeft = x + document.documentElement.scrollLeft;

obj.style.posTop = y + document.documentElement.scrollTop;

obj.style.visibility = 'visible';

return false;

}

function hideMenu()

{

if( event.button == 0)

{

var obj = document.getElementById('rightmenu');

if (obj == null)

return true;

obj.style.visibility = 'hidden';

obj.style.posLeft = 0;

obj.style.posTop = 0;

}

function writeStyle()

{

var strStyle = '';

strStyle += ""<STYLE type='text/css'>"";

strStyle += ""TABLE {Font-FAMILY: 'Tahoma','Verdana','宋体'; FONT-SIZE: 9pt}"";

strStyle += "".mtdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; CURSOR: hand}"";

strStyle += "".mtdexit {BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid}"";

strStyle += "".ltdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; CURSOR: hand}"";

strStyle += "".ltdexit {BACKGROUND-COLOR: #d0d0ce; BORDER-BOTTOM: #d0d0ce 1px solid; BORDER-TOP: #d0d0ce 1px solid; BORDER-LEFT: #d0d0ce 1px solid}"";

strStyle += "".rtdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; CURSOR: hand}"";

strStyle += "".rtdexit {BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid}"";

strStyle += ""</STYLE>"";

document.write(strStyle);

}

function makeMenu()

{

var myMenu, item;

myMenu = new contextMenu();

// 增加右键菜单项开始

// item = new contextItem("", "", "", "", "", "");

// 1-菜单项的文本

// 2-图标链接

// 3-所调用的命令按钮的ID