easyui datagrid 仿ext—右键

var createGridHeaderContextMenu = function(e, field) {
e.preventDefault();
var grid = $(this);/* grid本身 */
var headerContextMenu = this.headerContextMenu;/* grid上的列头菜单对象 */
if (!headerContextMenu) {
var tmenu = $('<div style="100px;"></div>').appendTo('body');
var asc = $('<div iconCls="icon-asc" field="asc">升序</div>').appendTo(tmenu);
var desc = $('<div iconCls="icon-desc" field="desc">降序</div>').appendTo(tmenu);
var filedHTML = $('<div iconCls="icon-columns"></div>');
var span = $('<span>显示列/隐藏列</span>');
var spdiv = $('<div></div>');
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="icon-checked" field="' + fields[i] + '"/>').html(fildOption.title).appendTo(spdiv);
} else {
$('<div iconCls="icon-unchecked" field="' + fields[i] + '"/>').html(fildOption.title).appendTo(spdiv);
}
}
span.appendTo(filedHTML);
spdiv.appendTo(filedHTML);
filedHTML.appendTo(tmenu);
headerContextMenu = this.headerContextMenu = tmenu.menu({
onClick : function(item) {
var f = $(this).attr('field')
var fieldProperty = $(item.target).attr('field');
if (item.iconCls == 'icon-checked') {
grid.datagrid('hideColumn', fieldProperty);
$(this).menu('setIcon', {
target : item.target,
iconCls : 'icon-unchecked'
});
}
if (item.iconCls == 'icon-unchecked') {
grid.datagrid('showColumn', fieldProperty);
$(this).menu('setIcon', {
target : item.target,
iconCls : 'icon-checked'
});
}
if (item.iconCls == 'icon-asc') {
var options = grid.datagrid('options');
options.sortName = f;
options.sortOrder =fieldProperty;
grid.datagrid('reload');
}
if (item.iconCls == 'icon-desc') {
var options = grid.datagrid('options');
options.sortName = f;
options.sortOrder =fieldProperty;
grid.datagrid('reload');
}
}
});
}
headerContextMenu.attr('field',field);
headerContextMenu.menu('show', {
left : e.pageX,
top : e.pageY
});
};
$.fn.datagrid.defaults.onHeaderContextMenu = createGridHeaderContextMenu;
$.fn.treegrid.defaults.onHeaderContextMenu = createGridHeaderContextMenu;