<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="UTF-8">
|
<title>Context Menu on DataGrid - jQuery EasyUI Demo</title>
|
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
<link rel="stylesheet" type="text/css" href="../demo.css">
|
<script type="text/javascript" src="../../jquery.min.js"></script>
|
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
</head>
|
<body>
|
<h2>Context Menu on DataGrid</h2>
|
<p>Right click on the header of DataGrid to display context menu.</p>
|
<div style="margin:20px 0;"></div>
|
<table id="dg"></table>
|
<script type="text/javascript">
|
(function($){
|
function buildMenu(target){
|
var state = $(target).data('datagrid');
|
if (!state.columnMenu){
|
state.columnMenu = $('<div></div>').appendTo('body');
|
state.columnMenu.menu({
|
onClick: function(item){
|
if (item.iconCls == 'tree-checkbox1'){
|
$(target).datagrid('hideColumn', item.name);
|
$(this).menu('setIcon', {
|
target: item.target,
|
iconCls: 'tree-checkbox0'
|
});
|
} else {
|
$(target).datagrid('showColumn', item.name);
|
$(this).menu('setIcon', {
|
target: item.target,
|
iconCls: 'tree-checkbox1'
|
});
|
}
|
}
|
})
|
var fields = $(target).datagrid('getColumnFields',true).concat($(target).datagrid('getColumnFields',false));
|
for(var i=0; i<fields.length; i++){
|
var field = fields[i];
|
var col = $(target).datagrid('getColumnOption', field);
|
state.columnMenu.menu('appendItem', {
|
text: col.title,
|
name: field,
|
iconCls: 'tree-checkbox1'
|
});
|
}
|
}
|
return state.columnMenu;
|
}
|
$.extend($.fn.datagrid.methods, {
|
columnMenu: function(jq){
|
return buildMenu(jq[0]);
|
}
|
});
|
})(jQuery);
|
|
$(function(){
|
$('#dg').datagrid({
|
url: 'datagrid_data1.json',
|
method: 'get',
|
title: 'Context Menu on DataGrid',
|
iconCls: 'icon-save',
|
width: 700,
|
height: 250,
|
fitColumns: true,
|
singleSelect: true,
|
columns:[[
|
{field:'itemid',title:'Item ID',width:80},
|
{field:'productid',title:'Product ID',width:120},
|
{field:'listprice',title:'List Price',width:80,align:'right'},
|
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
|
{field:'attr1',title:'Attribute',width:250},
|
{field:'status',title:'Status',width:60,align:'center'}
|
]],
|
onHeaderContextMenu: function(e, field){
|
e.preventDefault();
|
$(this).datagrid('columnMenu').menu('show', {
|
left:e.pageX,
|
top:e.pageY
|
});
|
}
|
});
|
});
|
</script>
|
</body>
|
</html>
|
