onHeaderContextMenu for multiple datagrid

[Alfred]

I used the following code I found on this forum for hiding and showing column:

Code:

var actcmenu;
function createColumnMenu(dgName){
    actcmenu = $('<div/>').appendTo('body');
    actcmenu.menu({
        onClick: function(item){
            if (item.iconCls == 'icon-ok'){
                $('#'+dgName+'').datagrid('hideColumn', item.name);
                    actcmenu.menu('setIcon', {
                        target: item.target,
                            iconCls: 'icon-empty'
                    });
            } else {
                $('#'+dgName+'').datagrid('showColumn', item.name);
                    actcmenu.menu('setIcon', {
                        target: item.target,
                        iconCls: 'icon-ok'
                    });
            }
        }
    });
    var fields = $('#'+dgName+'').datagrid('getColumnFields');
    for(var i=0; i<fields.length; i++){
        var field = fields[i];
        var col = $('#'+dgName+'').datagrid('getColumnOption', field);
            actcmenu.menu('appendItem', {
                text: col.title,
                name: field,
                iconCls: 'icon-ok'
            });
        }
}

I want to implement this code in every datagrid I have. Can anyone, especially stworthy can help me put this function into a reusable one.
Thanks

[stworthy]

The extended method 'columnMenu' returns the column menu that can be used to show or hide a column. This method can be found in this example https://www.jeasyui.com/easyui/demo/datagrid/contextmenu.html

Code:

$('#dg').datagrid({
onHeaderContextMenu: function(e, field){
e.preventDefault();
$(this).datagrid('columnMenu').menu('show', {
left:e.pageX,
top:e.pageY
});
}
})

[Alfred]

Thank you very much. I am using the following codes but I quickly removed and use your answer:

Code:

var createGridHeaderContextMenu = function(e, field) {
    e.preventDefault();
    var grid = $(this);/* The grid itself */
    var headerContextMenu = this.headerContextMenu;/* Column header menu object on Grid */
    var okCls = 'tree-checkbox1';//Selected
    var emptyCls = 'tree-checkbox0';//Cancel
    if (!headerContextMenu) {
        var tmenu = $('<div style="width:180px;"></div>').appendTo('body');
        var fields = grid.datagrid('getColumnFields');
        for ( var i = 0; i <fields.length; i++) {
            var fildOption = grid.datagrid('getColumnOption', fields[i]);
            if (!fildOption.hidden) {
                $('<div iconCls="'+okCls+'" field="' + fields[i] + '"/>').html('<span style="font-size:14px">'+fildOption.title+'</span>').appendTo(tmenu);
            } else {
                $('<div iconCls="'+emptyCls+'" field="' + fields[i] + '"/>').html('<span style="font-size:14px">'+fildOption.title+'</span>').appendTo(tmenu);
            }
        }
        headerContextMenu = this.headerContextMenu = tmenu.menu({
            onClick : function(item) {
                var field = $(item.target).attr('field');
                if (item.iconCls == okCls) {
                    grid.datagrid('hideColumn', field);
                    $(this).menu('setIcon', {
                        target : item.target,
                        iconCls : emptyCls
                    });
                } else {
                    grid.datagrid('showColumn', field);
                    $(this).menu('setIcon', {
                        target : item.target,
                        iconCls : okCls
                    });
                }
            }
        });
    }
    headerContextMenu.menu('show', {
        left : e.pageX,
        top : e.pageY
    });
};
$.fn.datagrid.defaults.onHeaderContextMenu = createGridHeaderContextMenu;