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>