dhtmlxgrid可以定义表头菜单以及表格右键菜单,表格右键菜单可以自定义,但是表头菜单只能使用其提供的菜单。dhtmlxgrid默认的表头菜单可以决定表格中每一列是否在表格中显示,并没有提供更多的扩展,如果我想自定义表头菜单,该怎么做呢?本文就是基于自定义表格菜单,说说我的实现方式。 以下是dhtmlxgrid的表头菜单效果:
其功能过于单一,以下是表格右键菜单效果:
如果能够像表格菜单一样自定义表头菜单,那会是一件非常有意义的事情,因为dhtmlxgrid菜单都是一些针对行和单元格的操作,没有提过针对列的操作,比如我可能需要在某一列上实现该列的显示与隐藏、排序、改变列属性以及在该列右边添加一新的列,等等。 如何实现表头菜单的自定义呢?可不可将表格右键菜单移到表头上去呢? 首先,来看看context menu的实现方式,下面代码来自dhtmlxgrid samples中的context menu例子源码:
上面代码创建了一个menu并将其作为context menu附件到grid上面去,下面为最关键的两行行代码:
上面对于context menu提供的方法太少,这时候可以看看dhtmlxmenu api,看看有没有设置context menu生效位置的方法(指定context menu在哪片区域有效)。在dhtmlxmenu api methods里没有找到需要的方法,这时候在官网论坛搜搜,也许可以找到点什么。 在论坛里可以找到一个例子,大致代码如下:
上面最关键的代码在最后几行,给dhtmlxgrid表头设置了一个id,然后调用menu的addcontextzone()方法指定centext的有效区域。视乎这就是我们所需要的,但是你执行以上代码你会发现onbuttonclick方法里mygrid.contextid会报错,原因是mygrid没有contextid属性(在context menu中通过该属性可以获知鼠标焦点在哪一行,但是现在在表头上强加了该menu,所以并不存在该属性了)。 剩下的问题是需要解决,菜单单击事件了。我们可以在表头的contextmenu事件处罚的时候获取鼠标焦点,并将自定义的菜单在该位置显示,该方法如下:
在上面的代码里,我们获得表头右键菜单焦点所在列索引,将其值赋给colid,然后在菜单单击事件的时候添加一新的列并将colid重置:
然后,需要禁止掉表格数据区域的菜单显示:
最后的最后,最后的代码如下:
效果图如下;