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

上接>>

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


// 4-链接地址


// 5-链接的target


// 6-右键菜单的项的类别


// myMenu.addItem(item);




[$MakeMenu$]


// 增加右键菜单项 结束




myMenu.show(this.document);




delete item;




delete myMenu;


}




function toggleMenu(isEnable)


{


if(isEnable)


document.oncontextmenu = showMenu;


else


document.oncontextmenu = new function() {return true;};


}




writeStyle();




makeMenu();




document.onclick = hideMenu;


//]]>


</script>";


}


}

未完待续>>