【项目经验】--EasyUI DataGrid之右键菜单

       前两天验收项目，老总提了一个不是需求的需求，为什么这么说呢？因为我们的管理不到位！话说当天，我们UI系统下发了一个总文件，上面写着“各个系统找一个没有添加UI的模块去添加最新版本UI进行测试”，然后过了一个多小时吧，我又从组长那接收到另一个通知“已经实现的系统模块就不要加新UI了”，然后，我就又吧没有完成的替换还原了。

       

       熟知，等到老总验收的当天，各个负责人的口径竟然变得不一致了，有的说强制要加，有的说部分要加，有的说因为出现问题就不要加，有的说等待通知，有的说……

       我就想说了，不就是一个右键吗？至于这样吗！可能因为我不是领导层，还体会不到那份辛酸……

后来组长下命令，要求“报表模块加上右键啊，多长时间能完成？”

我说“年前”

组长：“好！”

事实上，我只用了五分钟！

故事讲完了，下面个大家分享一下：

首先，如果我们没有使用已经封装的新版UI，那我们还是用我们的easyui的话，我们就要在html中设置按钮

<div id="menu" class="easyui-menu" style="width: 30px; display: none;">
      <!--放置一个隐藏的菜单Div-->
      <div id="btn_More" data-options="iconCls:'icon-remove'" onclick="MoreInfo()">更多</div>      
 </div>

然后呢？当然是写触发右键的js方法：

 <script type="text/javascript">
        $("#dt").datagrid({
            onRowContextMenu: function (e, rowIndex, rowData) { //右键时触发事件
                //三个参数：e里面的内容很多，真心不明白，rowIndex就是当前点击时所在行的索引，rowData当前行的数据
                e.preventDefault(); //阻止浏览器捕获右键事件
                $(this).datagrid("clearSelections"); //取消所有选中项
                $(this).datagrid("selectRow", rowIndex); //根据索引选中该行
                $('#menu').menu('show', {
                    //显示右键菜单
                    left: e.pageX,//在鼠标点击处显示菜单
                    top: e.pageY
                });
                e.preventDefault();  //阻止浏览器自带的右键菜单弹出
            }
        });

        //$('#btn_More').click(function () {
        //    MoreInfo();
        //})
    </script>

效果展示：

最后呢，把我们已经写好的方法连起来打通，就哦了!

       就这么点事，但是引出了我们管理上的重大问题，像米老师看起，要学会从高处看问题，那样才能边关全局。最后以我们的一句格言结束：“ 不谋万世者不足谋一时 不谋全局者不足谋一域”