明源售楼系统技术解析（四）右键菜单

1、右键菜单

1.1右键菜单截图

界面JQuery代码：

 //DataGrid右键菜单代码：
        $("#tbFangJianZiLiao").datagrid({//tbFangJianZiLiao是要右击的当前DataGrid
            onRowContextMenu: function (e, rowIndex, rowData) { //当你点击右键时触发事件
                e.preventDefault(); //阻止当前浏览器捕获右键事件
                $(this).datagrid("clearSelections"); //取消所有选中项
                $(this).datagrid("selectRow", rowIndex); //根据索引选中该行
                $('#menu').menu('show', {//menu是右键菜单的ID
                    //显示右键菜单
                    left: e.pageX, //在鼠标点击处显示菜单
                    top: e.pageY
                });
                e.preventDefault();  //阻止浏览器自带的右键菜单弹出
            }
            
        });

菜单形成代码：

 <div id="menu" class="easyui-menu" style="width: 30px; display: none;">
      <!--放置一个隐藏的菜单Div-->
      <div id="btn_WeiShou" data-options="iconCls:'icon-remove'" οnclick="sahj()">1.未售状态</div>
      <!--具体的菜单事件请自行添加，跟toolbar的方法是基本一样的-->
      <div id="btn_BaoLiu" data-options="iconCls:'icon-edit'"οnclick="bl()">2.保留状态</div>@*菜单选项*@
     <div id="btn_YuLiu" data-options="iconCls:'icon-edit'"οnclick="yl()">3.预留状态</div>
      <div id="btn_YuDing" data-options="iconCls:'icon-edit'"οnclick="yd()">4.预定状态</div>
      <div id="btn_RenGou" data-options="iconCls:'icon-edit'"οnclick="yy()">5.认购状态</div>
     <div id="btn_QianYue" data-options="iconCls:'icon-edit'"οnclick="qy()">6.签约状态</div>

仅供学习，不得用于商业用途，违者后果自负！