歡迎大家轉載，轉載請注明出處！

希望這個筆記對自己和大家有用，但是本人水平有限，如果出錯的地方，希望大家指出，多多批評，謝謝！

今天是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>

?

示例圖：

?源代碼下載：源碼下載

轉載于:https://www.cnblogs.com/y20091212/archive/2013/04/09/3010915.html

總結

以上是生活随笔為你收集整理的JQueryEasyUI学习笔记（十一）datagrid 右键菜单，冻结列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。