<!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. pdb文件 PDB文件：每个开发人员都必须知道的 .NET PDB文件到底是什么？

    pdb文件包含了编译后程序指向源代码的位置信息,用于调试的时候定位到源代码,主要是用来方便调试的. 在程序发布为release模式时,建议将 pdb文件删除, 同时,对外发布的时候,也把 pdb删除, ...

  2. 程序员Git代码托管平台

    程序员Git代码托管平台 说到Git代码托管平台,首先推荐的是GitHub,好多好的开源项目都来自GitHub,但是GitHub只能新建公开的Git仓库,私有 仓库要收费,如果你做的是一个开源项目,可 ...

  3. linux shell 命令获取字符串/文件的MD5值

    获取字符串的MD5值: 字符串“hello”的MD5: $ echo -n 'hello'|md5sum|cut -d ' ' -f1 得到的MD5值: 5d41402abc4b2a76b9719d9 ...

  4. jetty上传文件的时候报错显示文件过大

    这个时候我们需要修改jetty的参数文件 cd /data/java_web_app/news23456/etc vim jetty.xml 找到这一行 <Configure id=" ...

  5. Spring Cloud Netflix概览和架构设计

    Spring Cloud简介 Spring Cloud是基于Spring Boot的一整套实现微服务的框架.他提供了微服务开发所需的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全局锁.决策 ...

  6. android的一些控件

    原来朋友给过的一个 显示时间的 样例,还能够改动时间,可是要机子有root权限才干改动. 在这个时间表盘的样例基础上 改动改动  图片.背景图什么的      就能够达到自己想要的效果了.. 下载地址 ...

  7. git使用(一)----git安装

    windows安装git msysgit是windows版本的Git 下载地址:https://git-for-windows.github.io/ 安装步骤 linux安装git https://g ...

  8. 微信H5支付.NET版本备忘

    微信H5支付.NET版本备忘

  9. [na][tools]tcp/udp连通性测试

    一 端口连通性测试意义 目的端可以使用nc来临时开一个端口,客户端用telnet来连接测试 测试网络端口可达性,确保给某些使用特定端口的app做链路连通性检测.使它们能够正常的运行起来. 二 测试方法 ...

  10. Dos.ORM logo.Net轻量级开源ORM框架 Dos.ORM

    http://www.oschina.net/p/dos-orm http://www.oschina.net/project/lang/194/csharp http://www.cnblogs.c ...