Jquery EasyUI Datagrid右鍵菜單實(shí)現(xiàn)方法
更新時(shí)間：2016年12月30日 10:07:01 作者：令仔很忙
這篇文章主要為大家詳細(xì)介紹了Jquery EasyUI Datagrid右鍵菜單的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
最近在學(xué)Jquery EasyUI，現(xiàn)在來說一說EasyUI的DataGrid，一般當(dāng)我們在實(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> <!--具體的菜單事件請自行添加，跟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)了右鍵菜單，后期還會有改進(jìn)。我們做出來的東西最后是要交給用戶使用的，為用戶著想，怎樣讓用戶用著舒心，在用戶意想不到的時(shí)候，幫用戶完成了他們想要完成的工作，這就是這個(gè)軟件最大的成功！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用jquery的cookie實(shí)現(xiàn)登錄頁記住用戶名和密碼的方法
今天小編就為大家分享一篇關(guān)于使用jquery的cookie實(shí)現(xiàn)登錄頁記住用戶名和密碼的方法，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-03-03
這篇文章主要介紹了jQuery Dialog 取消右上角刪除按鈕事件的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
jQuery實(shí)現(xiàn)用戶注冊的表單驗(yàn)證示例
用戶注冊的表單往往是需要進(jìn)行驗(yàn)證的，否則會有一些不否合規(guī)則的數(shù)據(jù)入庫，后果會不堪設(shè)想，下面為大家詳細(xì)介紹下通過jquery是如何實(shí)現(xiàn)的，下面有個(gè)示例，感興趣的朋友可以參考下2013-08-08
ID是html頁面中一些元素都可以有個(gè)本頁面唯一的id包括如,div,input,iframe等等都是可以的,下面我來給大家介紹利用jquery 獲取id值方法,有需要了解的朋友可參考2013-09-09
本文主要介紹了獲取jqGrid中選擇的行的數(shù)據(jù)的語法和獲取簡例，需要的朋友可以看下2016-11-11
jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕切換圖片
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
用戶雙擊DOM對象（例如按鈕和鏈接等）時(shí)，對于用戶交互一直是個(gè)麻煩的問題，如果你的元素點(diǎn)擊事件不止觸發(fā)一次，可以參考以下的解決方案2013-08-08
jquery實(shí)時(shí)獲取時(shí)間的簡單實(shí)例
下面小編就為大家?guī)硪黄猨query實(shí)時(shí)獲取時(shí)間的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
下面小編就為大家?guī)硪黄胘Query對無序列表排序的簡單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
jQuery1.6 類型判斷實(shí)現(xiàn)代碼，學(xué)習(xí)jquery的朋友可以參考下。2011-09-09