成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

最近在學(xué)Jquery EasyUI，現(xiàn)在來說一說EasyUI的DataGrid，一般當(dāng)我們?cè)趯?shí)現(xiàn)前端界面的時(shí)候，經(jīng)常在DataGrid的上面或者后面加一些按鈕，方便用戶進(jìn)行一些添加，刪除，編輯等功能

用戶在每次使用的時(shí)候，都需要去先選中一條或者多條數(shù)據(jù)，然后在去點(diǎn)按鈕進(jìn)行相關(guān)操作，這樣其實(shí)還是很麻煩的，做項(xiàng)目的過程中，為了用戶著想，做了一個(gè)右鍵菜單，用戶想要?jiǎng)h除或者編輯某一條數(shù)據(jù)直接在其位置上右鍵就可以。

下面上HTML 代碼

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

下面是Javascript的代碼

//DataGrid右鍵菜單代碼： 
$("#dg").datagrid({ 
 onRowContextMenu: function (e, rowIndex, rowData) { //右鍵時(shí)觸發(fā)事件 
 //三個(gè)參數(shù)：e里面的內(nèi)容很多，真心不明白，rowIndex就是當(dāng)前點(diǎn)擊時(shí)所在行的索引，rowData當(dāng)前行的數(shù)據(jù) 
 e.preventDefault(); //阻止瀏覽器捕獲右鍵事件 
 $(this).datagrid("clearSelections"); //取消所有選中項(xiàng) 
 $(this).datagrid("selectRow", rowIndex); //根據(jù)索引選中該行 
 $('#menu').menu('show', { 
  //顯示右鍵菜單 
  left: e.pageX,//在鼠標(biāo)點(diǎn)擊處顯示菜單 
  top: e.pageY 
 }); 
 e.preventDefault(); //阻止瀏覽器自帶的右鍵菜單彈出 
 } 
}); 

下面是實(shí)現(xiàn)后的效果：

現(xiàn)在只是簡單的實(shí)現(xiàn)了右鍵菜單，后期還會(huì)有改進(jìn)。我們做出來的東西最后是要交給用戶使用的，為用戶著想，怎樣讓用戶用著舒心，在用戶意想不到的時(shí)候，幫用戶完成了他們想要完成的工作，這就是這個(gè)軟件最大的成功！

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持綠夏網(wǎng)。