【項目經驗】--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>

效果展示：

最后呢，把我們已經寫好的方法連起來打通，就哦了!

       就這么點事，但是引出了我們管理上的重大問題，像米老師看起，要學會從高處看問題，那樣才能邊關全局。最后以我們的一句格言結束：“ 不謀萬世者不足謀一時 不謀全局者不足謀一域”