Title: onHeaderContextMenu for multiple datagrid
Post by: Alfred on April 10, 2018, 11:17:00 PM
I used the following code I found on this forum for hiding and showing column: 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
Title: Re: onHeaderContextMenu for multiple datagrid
Post by: stworthy on April 11, 2018, 02:16:11 AM
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 $('#dg').datagrid({ onHeaderContextMenu: function(e, field){ e.preventDefault(); $(this).datagrid('columnMenu').menu('show', { left:e.pageX, top:e.pageY }); } })
Title: Re: onHeaderContextMenu for multiple datagrid
Post by: Alfred on April 11, 2018, 05:59:39 AM
Thank you very much. I am using the following codes but I quickly removed and use your answer: 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;
|