<!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(){
$('#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();
if (!cmenu){
createColumnMenu();
}
cmenu.menu('show', {
left:e.pageX,
top:e.pageY
});
}
});
});
var cmenu;
function createColumnMenu(){
cmenu = $('<div/>').appendTo('body');
cmenu.menu({
onClick: function(item){
if (item.iconCls == 'icon-ok'){
$('#dg').datagrid('hideColumn', item.name);
cmenu.menu('setIcon', {
target: item.target,
iconCls: 'icon-empty'
});
} else {
$('#dg').datagrid('showColumn', item.name);
cmenu.menu('setIcon', {
target: item.target,
iconCls: 'icon-ok'
});
}
}
});
var fields = $('#dg').datagrid('getColumnFields');
for(var i=0; i<fields.length; i++){
var field = fields[i];
var col = $('#dg').datagrid('getColumnOption', field);
cmenu.menu('appendItem', {
text: col.title,
name: field,
iconCls: 'icon-ok'
});
}
}
</script>
</body>
</html>

标题添加菜单HeaderContextMenu的更多相关文章

  1. WordPress插件制作教程(三): 添加菜单的方法

    上一篇编写了一个简单的插件,让大家对插件的简单制作有个了解,这一篇我们在更深一步,当我们激活插件后后台会显示菜单出来,然后通过单击菜单显示自己定义好的信息.激活之后会在WordPress后台显示一个菜 ...

  2. Abp添加菜单

    Abp添加菜单 在abp模板中添加菜单,EntityFramework+Angular.js模板,使用的Abp版本为3.8.1. 创建Abp项目模板,例如名称叫做LawAndRegulation. 服 ...

  3. 实现UE添加自定义按钮之添加菜单

    1.ueditor.config.js配置文件中配置 2.在ueditor.all.js配置文件中配置点开的的弹框位置 3.在ueditor1_4_3-utf8-jsp\themes\default\ ...

  4. 从0到1写一款自动为Markdown标题添加序号的Jetbrains插件

    1. markdown-index 最近做了一个Jetbrains的插件,叫markdown-index,它的作用是为Markdown文档的标题自动添加序号,效果如下: 目前已经可以在Jetbrain ...

  5. Qt自适应大小显示图片，添加菜单

    由于后面的图像处理需要UI,OpenCV自带也不怎么会,MFC实在懒得学的.听同学说Qt不错,就用Qt做UI了. 本文主要介绍三个内容:在Qt Creator中使用OpenCV2.Qt中自适应显示图片 ...

  6. MFC 对话框添加菜单

    1.在Resource View 里右击菜单里选择Add Resource,选择menu,添加一个IDR_MENU1的菜单.在编辑器编辑菜单,添加菜单项,命名各个菜单项的ID. 2.在所要添加菜单的对 ...

  7. 【Android】添加菜单和监听菜单方法详解

    添加菜单 可以在onCreateOptionsMenu或者onPrepareOptionsMenu方法中来添加菜单 代码添加: menu.add((int groupId, int itemId, i ...

  8. EcShop后台添加菜单[步骤]

    1. 添加菜单的链接地址:打开文件[/后台目录/includes/inc_menu.php],在结尾加入例如:$modules['dashi']['dashi_list'] = 'join_dashi ...

  9. menuStrip1动态添加菜单及快捷键

    public partial class FormMkTest : Form { public FormMkTest() { InitializeComponent(); } private void ...

随机推荐

  1. HDU 5092 DP

    DP水题 求从上到下走完,使所取得权值最小,并输出路径,若有多个满足,则输出靠右的 #include "stdio.h" #include "string.h" ...

  2. 总结Codeigniter的一些优秀特性

    总结Codeigniter的一些优秀特性 近期准备接手改进一个别人用Codeigniter写的项目.尽管之前也实用过CI,可是是全然按着自己的意思写的,没按CI的一些套路.用在公众的项目,不妨按框架规 ...

  3. Linux内存管理Swap和Buffer Cache机制

    Linux内存管理Swap和Buffer Cache机制 一个完整的Linux系统主要有存储管理,内存管理,文件系统和进程管理等几方面组成,贴出一些以前学习过的一个很好的文章.与大家共享!以下主要说明 ...

  4. angular.js ng-repeat动态插入删除dom节点

    既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并 ...

  5. js 控制图片大小核心讲解

    控制图片大小的方法有很多,在本文将为大家详细介绍下使用js实现缩放图片,核心代码如下,感兴趣的朋友可以参考下 缩放图片脚本分享 <!DOCTYPE HTML PUBLIC "-//W3 ...

  6. 【Android】8.1 主题基本用法

    分类:C#.Android.VS2015: 创建日期:2016-02-17 一.创建本章示例主界面 1.界面截图 2.MainActivity.cs文件中对应的代码 在CreateChItems()方 ...

  7. Mingw opencv Windows下命令行运行

    1.下载opencv 2.3 http://sourceforge.net/projects/opencvlibrary/files/ 下个opencv-win版本吧 至于版本号就随意吧,我选的是2. ...

  8. db papers

    http://www.redbook.io/ http://db.cs.berkeley.edu/papers/ https://github.com/rxin/db-readings http:// ...

  9. 每日英语：Mooncake Austerity Hits China's Mid-Autumn Festival

    First baijiu, then red carpets, and now mooncakes. For Chinese government officials, the list of tab ...

  10. The power of now

    惊喜的发现,在这个短暂而又漫长的盛夏里心情开始随天气而变了(*^__^*) ...... <秘密>和<当下的力量>两者都一样,看起来费劲,不过还真的有点道理. <冰与火之 ...