JQueryEasyUI learning notes (11) Right-click the datagrid menu and freeze the column

I hope this note will be useful to myself and everyone, but I have a limited level. If something goes wrong, I hope you can point out more criticism. Thank you!
Today is the freeze column and right-click menu of the datagrid framework:
I don't need to talk much about it. I just wrote a lot of code in the above Annotations:

First, freeze the column code:

FrozenColumns :[[
// Freezing a column indicates that the reference column is displayed so that no scroll bar appears.
{
Field: 'name ',
Title: 'name ',
Width: 400,
Sortable: true,
Editor :{
// Set it to editable
Type: 'validatebox', // sets the editing format
Options :{
Required: true // sets the edit rule attribute.
}
}
} // Sortable: true. You can change the ascending or descending order when you click this column.
],
Columns :[[
{
Field: 'code ',
Title: 'code ',
Width: 600,
Editor :{
// Set it to editable
Type: 'validatebox', // the built-in styles of the editing style include text, textarea, checkbox, numberbox, validatebox, datebox, combobox, and combotree.
Options :{}
}
},{
Field: 'addr ',
Title: 'addr ',
Width: 200,
Editor :{
// Set it to editable
Type: 'datetimebox', // here we will perform a datetimebox Extension
Options :{
Required: true // sets the edit rule attribute.
}
}
}
] Note: when using frozen columns, set the attribute fitColumns to false or leave the default value false, otherwise it will not work:

 

Right-click the menu code:

OnRowContextMenu: function (e, rowIndex, rowData) {// triggers an event when right-clicking
// Three parameters: e contains a lot of content, which is hard to understand. rowIndex is the index of the row where the current click is located, and the data of the current row of rowData
E. preventDefault (); // prevents the browser from capturing context events
$ (This). datagrid ("clearSelections"); // cancel all selected items
$ (This). datagrid ("selectRow", rowIndex); // select this row based on the index
$ ('# Menu'). menu ('show ',{
// Right-click the menu
Left: e. pageX, // click the mouse to display the menu
Top: e. pageY
});
}
<Div id = "menu" class = "easyui-menu" style = "width: 50px; display: none;">
<! -- Place a hidden menu Div -->
<Div> Add </div>
<Div data-options = "iconCls: 'icon-save'" onclick = ""> Delete </div>
<! -- Add menu events by yourself, which is basically the same as the toolbar Method -->
<Div> modify </div>
</Div>

Example: