DWZ前端框架添加表格右鍵彈出DIV菜單功能

一、首先在dwz.frag.xml文件中<_AJAX_>節點內聲明彈出的DIV菜單結構：

<!-- 表格右鍵菜單開始 -->
<_PAGE_ id="ServProc"><![CDATA[
<ul id="ServProc">
    <li rel="ChangePasswd">修改密碼</li>
    <li rel="SwitchBillMode">變動計費模式</li>
    <li rel="ChangeEmail">修改郵箱地址</li>
</ul>
]]></_PAGE_>
<!-- 表格右鍵菜單結束 -->

二、而後在須要彈出右鍵菜單的表格所在頁面底部添加相似於以下的js代碼

<script language="jsvascript">
    $("tbody tr").contextMenu("ServProc",{
        // t:觸發右鍵單擊事件的表格行元素;m:彈出的DIV菜單對象
        bindings:{ /*菜單條目單擊事件處理,好比$.pdialog.open();navTab.openTab()*/
            ChangePasswd:function(t,m){
            },
            SwitchBillMode:function(t,m){
            },
            ChangeEmail:function(t,m){
            }
        },
        ctrSub:function(t,m){ // t:觸發右鍵單擊事件的表格行元素;m表明彈出的DIV菜單對象
            //如下這幾個變量存儲彈出的菜單條目句柄,能夠根據業務添加或移除disabled樣式
            var mChangePasswd = m.find("[rel='ChangePasswd']");
            var mSwitchBillMode = m.find("[rel='SwitchBillMode']");
            var mChangeEmail = m.find("[rel='ChangeEmail']");
            //DWZ框架在表格內依靠target和rel來標記條目惟一值
            var tkey=t.attr("target"); //取得發生右鍵單擊事件的表格條目的target值
			var tval=t.attr("rel"); //取得發生右鍵單擊事件的表格條目的rel值
            //模擬單擊選中事件,單擊選中事件會使發生單擊事件的表格條目顏色加深並存儲target和rel
			var $grid=t.parents(".pageContent");
			if($("input:"+"#"+tkey+':hidden',$grid).size()==0){
				$grid.prepend('<input id="'+tkey+'" type="hidden" value="'+tval+'" />');
			}
			$("input:"+"#"+tkey+':hidden',$grid).val(tval);
			$("tbody tr").filter(".selected").removeClass("selected");
			t.addClass("selected");
            //調整彈出的DIV菜單遮罩層寬度
			m.css("width","100px");
			$("#contextmenuShadow").css("width","104px");
        }
    })
</script>