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;
|