自定义dhtmlxGrid表头菜单

dhtmlxGrid可以定义表头菜单以及表格右键菜单，表格右键菜单可以自定义，但是表头菜单只能使用其提供的菜单。dhtmlxGrid默认的表头菜单可以决定表格中每一列是否在表格中显示，并没有提供更多的扩展，如果我想自定义表头菜单，该怎么做呢？本文就是基于自定义表格菜单，说说我的实现方式。 以下是dhtmlxGrid的表头菜单效果：

其功能过于单一，以下是表格右键菜单效果：

如果能够像表格菜单一样自定义表头菜单，那会是一件非常有意义的事情，因为dhtmlxGrid菜单都是一些针对行和单元格的操作，没有提过针对列的操作，比如我可能需要在某一列上实现该列的显示与隐藏、排序、改变列属性以及在该列右边添加一新的列，等等。 如何实现表头菜单的自定义呢？可不可将表格右键菜单移到表头上去呢？ 首先，来看看context menu的实现方式，下面代码来自dhtmlxGrid Samples中的Context menu例子源码：

function onButtonClick(menuitemId, type) {
    var data = mygrid.contextID.split("_");
    //rowId_colInd;
    mygrid.setRowTextStyle(data[0], "color:" + menuitemId.split("_")[1]);
    return true;
}
menu = new dhtmlXMenuObject();
menu.setIconsPath("../common/images/");
menu.renderAsContextMenu();
menu.attachEvent("onClick", onButtonClick);
menu.loadXML("../common/_context.xml");
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Author,Title");
mygrid.setInitWidths("250,250");
mygrid.enableAutoWidth(true);
mygrid.setColAlign("left,left");
mygrid.setColTypes("ro,link");
mygrid.setColSorting("str,str");
mygrid.enableContextMenu(menu);
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("../common/grid_links.xml");

上面代码创建了一个menu并将其作为context menu附件到grid上面去，下面为最关键的两行行代码：

menu.renderAsContextMenu();
mygrid.enableContextMenu(menu);

上面对于context menu提供的方法太少，这时候可以看看dhtmlxMenu api，看看有没有设置context menu生效位置的方法（指定context menu在哪片区域有效）。在dhtmlxMenu API Methods里没有找到需要的方法，这时候在官网论坛搜搜，也许可以找到点什么。 在论坛里可以找到一个例子，大致代码如下：

function onButtonClick(menuitemId, type) {
    var data = mygrid.contextID.split("_");
    //rowId_colInd;
    mygrid.setRowTextStyle(data[0], "color:" + menuitemId.split("_")[1]);
    return true;
}
menu = new dhtmlXMenuObject();
menu.setIconsPath("../common/images/");
menu.attachEvent("onClick", onButtonClick);
menu.loadXML("../common/_context.xml");

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Author,Title");
mygrid.setInitWidths("250,250");
mygrid.enableAutoWidth(true);
mygrid.setColAlign("left,left");
mygrid.setColTypes("ro,link");
mygrid.setColSorting("str,str");
//mygrid.enableContextMenu(menu); //使其失效
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("../common/grid_links.xml");

mygrid.hdr.id = "header_id";
var header_row = mygrid.hdr.rows[1];
for ( var i = 0; i < header_row.cells.length; i++) {
   header_row.cells[i].id = "context_zone_" + i;
}
menu.addContextZone("header_id");

上面最关键的代码在最后几行，给dhtmlxGrid表头设置了一个id，然后调用menu的addContextZone()方法指定centext的有效区域。视乎这就是我们所需要的，但是你执行以上代码你会发现onButtonClick方法里mygrid.contextID会报错，原因是mygrid没有contextID属性（在context menu中通过该属性可以获知鼠标焦点在哪一行，但是现在在表头上强加了该menu，所以并不存在该属性了）。 剩下的问题是需要解决，菜单单击事件了。我们可以在表头的contextmenu事件处罚的时候获取鼠标焦点，并将自定义的菜单在该位置显示，该方法如下：

dhtmlxEvent(mygrid.hdr, "contextmenu", function(ev) {
	ev = ev || event;
	var el = ev.target || ev.srcElement;
	var zel = el;
	while (zel.tagName != "TABLE")
		zel = zel.parentNode;
	var grid = zel.grid;
	if (!grid)
		return;
	grid.setActive();

	el = grid.getFirstParentOfType(el, "TD")

	if ((grid) && (!grid._colInMove)) {
		grid.resized = null;
		if ((!grid._mCols) || (grid._mCols[el._cellIndex] == "true"))
			colId = el._cellIndex + 1;//获得表头右键菜单焦点所在列索引
	}

	function mouseCoords(ev) {
		if (ev.pageX || ev.pageY) {
			return {
				x : ev.pageX,
				y : ev.pageY
			};
		}
		var d = _isIE && document.compatMode != "BackCompat" ?
	            document.documentElement: document.body;
		return {
			x : ev.clientX + d.scrollLeft - d.clientLeft,
			y : ev.clientY + d.scrollTop - d.clientTop
		};
	}

	var coords = mouseCoords(ev);
	menu.addContextZone("header_id");
	menu.showContextMenu(coords.x, coords.y);//强制显示
	return true;
});

在上面的代码里，我们获得表头右键菜单焦点所在列索引，将其值赋给colId，然后在菜单单击事件的时候添加一新的列并将colId重置：

function onButtonClick(menuitemId, type, e) {
	mygrid.insertColumn(colId, "12", "ed", 80);
	colId = 0;
	return true;
}

然后，需要禁止掉表格数据区域的菜单显示：

mygrid.attachEvent("onBeforeContextMenu", function(rid, cid, e) {
	return false;//禁止数据区域菜单
});

最后的最后，最后的代码如下：

var mygrid, colId;

function onButtonClick(menuitemId, type, e) {
	mygrid.insertColumn(colId, "12", "ed", 80);
	colId = 0;
	return true;
}

menu = new dhtmlXMenuObject();
menu.setIconsPath("../common/images/");
menu.renderAsContextMenu();
menu.attachEvent("onClick", onButtonClick);
menu.loadXML("../common/_context.xml");
menu.attachEvent("onBeforeContextMenu", function(zoneId, e) {
	var hdr = document.getElementById(zoneId)
	return true;
});

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,
          Date of Publication");
mygrid.setInitWidths("50,150,100,80,80,80,80,200");
mygrid.setColAlign("right,left,left,right,center,left,center,center");
mygrid.setColTypes("dyn,edtxt,ed,price,ch,co,ra,ro");

mygrid.init();
mygrid.setSkin("dhx_skyblue");
//mygrid.enableHeaderMenu();
mygrid.enableColumnMove(true);
mygrid.enableContextMenu(menu);
dhtmlxEvent(mygrid.hdr, "contextmenu", function(ev) {
	ev = ev || event;
	var el = ev.target || ev.srcElement;
	var zel = el;
	while (zel.tagName != "TABLE")
		zel = zel.parentNode;
	var grid = zel.grid;
	if (!grid)
		return;
	grid.setActive();

	el = grid.getFirstParentOfType(el, "TD")

	if ((grid) && (!grid._colInMove)) {
		grid.resized = null;
		if ((!grid._mCols) || (grid._mCols[el._cellIndex] == "true"))
                            //获得表头右键菜单焦点所在列索引
			colId = el._cellIndex + 1;
	}

	function mouseCoords(ev) {
		if (ev.pageX || ev.pageY) {
			return {
				x : ev.pageX,
				y : ev.pageY
			};
		}
		var d = _isIE && document.compatMode != "BackCompat" ?
                         document.documentElement: document.body;
		return {
			x : ev.clientX + d.scrollLeft - d.clientLeft,
			y : ev.clientY + d.scrollTop - d.clientTop
		};
	}

	var coords = mouseCoords(ev);
	menu.addContextZone("header_id");
	menu.showContextMenu(coords.x, coords.y);//强制显示
	return true;
});

mygrid.attachEvent("onBeforeContextMenu", function(rid, cid, e) {
	return false;//禁止数据区域菜单
});

mygrid.loadXML("../common/grid_ml_16_rows_columns_manipulations.xml");

mygrid.hdr.id = "header_id";
var header_row = mygrid.hdr.rows[1];
for ( var i = 0; i < header_row.cells.length; i++) {
	header_row.cells[i].id = "context_zone_" + i;
}

效果图如下;

时间： 2024-10-31 18:36:58

自定义dhtmlxGrid表头菜单的相关文章

js wdContextMenu自定义网页右键菜单实例

wdContextMenu是一个jQuery插件,可以用来自定义网页右键菜单,支持多级二级菜单,支持菜单左侧图标标识,多个自定义选项,可以满足您的项目的不同的需求. 使用方法 Here is the configuration list of the content menu. var option = { width: 150, items: [     { text: "Item One", icon: "sample-css/wi0126-16.gif", a

android 自定义下拉菜单

    本实例的自定义下拉菜单主要是继承PopupWindow类来实现的弹出窗体,各种布局效果可以根据自己定义设计.弹出的动画效果主要用到了translate.alpha.scale,具体实现步骤如下:          先上效果图如下:左边下拉菜单.中间下拉菜单.右边下拉菜单                   1.主界面布局 activity_main.xml: [html] view plain copy <RelativeLayout xmlns:android="http://s

求大神 gridview中关于自定义下拉菜单的联动如何实现

问题描述 [size=14px]如题,gridview中自定义下拉菜单的联动如何实现,困扰我很久了,方法很多,因为自己确实是个菜鸟,搞不定.哪位大神能贴个代码吗?我需要设定"维护班组"与"变电所"的联动下拉.比如维护班组中有一班.二班.三班下拉菜单,需要对应变电所的1#变.2#变.3#变,4#变.5#变.6#变,7#变.8#变.9#变,这几个[/size] 解决方案

Android自定义View展开菜单功能的实现

先给大家展示下效果图,如果大家感觉不错,请参考实现代码. 思路 1.下角Button的父View加入一个FrameLayout,也就是图中全屏透明灰色部分. 菜单没有弹出的时候设置为不可见. 设置FrameLayout点击事件,点击的时候缩回菜单. 对应init() 2.rameLayout中加入菜单按钮,也就是弹出的那三个. 菜单没有弹出的时候设置为不可见. 对应addElement()和freshElement() 3.右下角的按钮,旋转图标(也可以不旋转). 对应setRotateAnim

jquery自定义网页右键菜单和多选的例子

最近在项目中要实现一些自定义效果,例如右键菜单.全选.不连续选择等等,个人认为主要是理清楚逻辑和事件关系.要实现这些,也有现成的插件可以用,如jQuery UI的selectable. 右键菜单 当浏览网页时,单击鼠标右键(或ctrl+触模板左键)会出现浏览器默认的右键菜单项,就像这样子的: 但是当要对某个元素自定义右键,像这样子的: 就必须得先禁用浏览器默认的菜单,需要监听contextmenu事件,关键代码如下: $(function(){  $('#box').on('contextmen

Javascript 自定义多级右键菜单效果代码

自定义右键菜单,请在页面点击右键查看效果. JavaScript 学习 第一课 网页特效原理分析 响应用户操作 提示框效果 事件驱动 元素属性操作 第二课 改变网页背景颜色 函数传参 高重用性函数的编写 126邮箱全选效果 循环及遍历操作 第三课 JavaScript组成 ECMAScript DOM BOM JavaScript兼容性来源 JavaScript出现的位置.优缺点 变量.类型.typeof.数据类型转换.变量作用域 闭包 什么是闭包 简单应用 闭包缺点 运算符 程序流程控制 定时

Android自定义ViewGroup(侧滑菜单)详解及简单实例

自定义侧滑菜单的简单实现 不少APP中都有这种侧滑菜单,例如QQ这类的,比较有名开源库如slidingmenu. 有兴趣的可以去研究研究这个开源库. 这里我们将一种自己的实现方法,把学习的 东西做个记录,O(∩_∩)O! 首先看效果图: 这里我们实现的侧滑菜单,是将左侧隐藏的菜单和主面板看作一个整体来实现的,而左侧隐藏的菜单和主面板相当于是这个自定义View的子View. 首先来构造该自定义View的布局: 自定义的SlideMenuView包含两个子view,一个是menuView,另一个是m

Android 自定义组件卫星菜单的实现

卫星菜单 ArcMenu 相信大家接触安卓,从新手到入门的过渡,就应该会了解到卫星菜单.抽屉.Xutils.Coolmenu.一些大神封装好的一些组件.这些组件在 Github 上面很容易搜得到,但是有时候打开会发现看不懂里面的代码,包括一些方法和函数 ..... 首先先上效果图: 实现效果 首先如果要想自定义组件 1.那么第一件事就是赋予自定义组件的属性,从效果图上看出,该组件可以存在屏幕的各个角落点,那么位置是其属性之一. 2.既然是卫星菜单,那么主按钮和其附属的小按钮之间的围绕半径也应该作

怎样为SharePoint网站创建自定义导航菜单

相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoint 2007/2010的网站导航基本上基于标准的ASP.NET SiteMap模型,所以只要你对ASP.NET SiteMap有一些了解,就能创建一个自定义的导航菜单. 在开始之前,让我们先从网上随便找一个样子比较cool的菜单控件.在下面的示例中,我会选择使用Smooth Navigation Menu这个jQuery控件,来渲染出SharePoint网站的顶部导航菜单.将Smooth