Jquery EasyUI Datagrid右鍵菜單實現(xiàn)方法
最近在學(xué)Jquery EasyUI,現(xiàn)在來說一說EasyUI的DataGrid,一般當(dāng)我們在實現(xiàn)前端界面的時候,經(jīng)常在DataGrid的上面或者后面加一些按鈕,方便用戶進行一些添加,刪除,編輯等功能
用戶在每次使用的時候,都需要去先選中一條或者多條數(shù)據(jù),然后在去點按鈕進行相關(guān)操作,這樣其實還是很麻煩的,做項目的過程中,為了用戶著想,做了一個右鍵菜單,用戶想要刪除或者編輯某一條數(shù)據(jù)直接在其位置上右鍵就可以。
下面上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) { //右鍵時觸發(fā)事件 //三個參數(shù):e里面的內(nèi)容很多,真心不明白,rowIndex就是當(dāng)前點擊時所在行的索引,rowData當(dāng)前行的數(shù)據(jù) e.preventDefault(); //阻止瀏覽器捕獲右鍵事件 $(this).datagrid("clearSelections"); //取消所有選中項 $(this).datagrid("selectRow", rowIndex); //根據(jù)索引選中該行 $('#menu').menu('show', { //顯示右鍵菜單 left: e.pageX,//在鼠標(biāo)點擊處顯示菜單 top: e.pageY }); e.preventDefault(); //阻止瀏覽器自帶的右鍵菜單彈出 } });
下面是實現(xiàn)后的效果:
現(xiàn)在只是簡單的實現(xiàn)了右鍵菜單,后期還會有改進。我們做出來的東西最后是要交給用戶使用的,為用戶著想,怎樣讓用戶用著舒心,在用戶意想不到的時候,幫用戶完成了他們想要完成的工作,這就是這個軟件最大的成功!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用jquery的cookie實現(xiàn)登錄頁記住用戶名和密碼的方法
今天小編就為大家分享一篇關(guān)于使用jquery的cookie實現(xiàn)登錄頁記住用戶名和密碼的方法,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-03-03