Jquery EasyUI Datagrid右鍵菜單實現方法

2019-11-19 18:11:38

字體：大中小

來源：轉載

供稿：網友

最近在學Jquery EasyUI，現在來說一說EasyUI的DataGrid，一般當我們在實現前端界面的時候，經常在DataGrid的上面或者后面加一些按鈕，方便用戶進行一些添加，刪除，編輯等功能

用戶在每次使用的時候，都需要去先選中一條或者多條數據，然后在去點按鈕進行相關操作，這樣其實還是很麻煩的，做項目的過程中，為了用戶著想，做了一個右鍵菜單，用戶想要刪除或者編輯某一條數據直接在其位置上右鍵就可以。

下面上HTML 代碼

<div id="menu" class="easyui-menu" style="width: 30px; display: none;">  <!--放置一個隱藏的菜單Div-->  <div id="btn_Delete" data-options="iconCls:'icon-remove'" onclick="">刪除</div>  <!--具體的菜單事件請自行添加，跟toolbar的方法是基本一樣的-->  <div id="btn_Modify" data-options="iconCls:'icon-edit'">編輯</div>  </div>

下面是Javascript的代碼

//DataGrid右鍵菜單代碼： $("#dg").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(); //阻止瀏覽器自帶的右鍵菜單彈出  } });

下面是實現后的效果：