JQueryEasyUI學習筆記 十一 datagrid 右鍵選單 凍結列
阿新 • • 發佈：2018-11-07
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
歡迎大家轉載，轉載請註明出處！
希望這個筆記對自己和大家有用，但是本人水平有限，如果出錯的地方，希望大家指出，多多批評，謝謝！
今天是datagrid框架的凍結列和右鍵選單：
廢話就不多說了，直接上程式碼，上面的註釋寫的挺多的：
先是凍結列程式碼：
frozenColumns: [[ //凍結列 就是指定顯示參照列 使其不會出現滾動條 { field:'name', title: 'Name', width: 400, sortable:true, editor: {//設定其為可編輯 type: 'validatebox',//設定編輯格式 options: { required: true//設定編輯規則屬性 } } }//sortable:true點選該列的時候可以改變升降序 ]], columns: [[ { field: 'code', title: 'Code', width: 600, editor: {//設定其為可編輯 type: 'validatebox',//設定編輯樣式 自帶樣式有：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree 可自行擴充套件 options: {} } }, { field: 'addr', title: 'addr', width: 200, editor: {//設定其為可編輯 type: 'datetimebox',//這裡我們將進行一個datetimebox的擴充套件 options: { required: true//設定編輯規則屬性 } } } ]]
特別說明，在使用凍結列的時候，屬性fitColumns要設定為false或者不寫預設false，不然沒有效果：
右鍵選單程式碼：
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 }); }
<div id="menu" class="easyui-menu" style="width: 50px; display: none;"> <!--放置一個隱藏的選單Div--> <div>增加</div> <div data-options="iconCls:'icon-save'" onclick="">刪除</div> <!--具體的選單事件請自行新增，跟toolbar的方法是基本一樣的--> <div>修改</div></div>
示例圖：
原始碼下載：原始碼下載
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow
