FineUI官方Demo上一直没有Grid右键菜单的实现,其实从4.1.x的版本开始,允许添加自定义的事件监听(Listeners),所以要实现这个功能已经相当容易了。

ExtJs右键菜单有很多种,对于Grid控件来说,我这里只简单说明两种实现。即在表格的数据行上右键单击时弹出的菜单,以及在空白位置右键单击时弹出的菜单。

时间有限,废话不多说了,先看两个效果图。(实现环境 FineUI4.1.6,.NET 4.0因为需要指定控件的ID)

1. 数据行右键菜单

2. 空白处右键菜单

实现方法:

step1:添加Grid控件。。。不多说了

step2:往Grid控件后面添加两个Menu控件,分别对应要实现的两个右键菜单,要指定ClientIDMode为Static,Hidden为true

        <f:Menu ID="containerMenu" runat="server" ClientIDMode="Static" Hidden="true">
<f:MenuButton Icon="Add" Text="添加" OnClick="OnAddClick"></f:MenuButton>
<f:MenuSeparator />
<f:MenuButton Icon="Reload" Text="刷新"></f:MenuButton>
</f:Menu>
<f:Menu ID="itemMenu" runat="server" ClientIDMode="Static" Hidden="true">
<f:MenuButton Icon="Pencil" Text="修改" OnClick="OnEditClick"></f:MenuButton>
<f:MenuButton Icon="Delete" Text="删除"></f:MenuButton>
<f:MenuSeparator />
<f:MenuButton Icon="Reload" Text="刷新"></f:MenuButton>
</f:Menu>

step3:为Grid添加事件“containercontextmenu”,“itemcontextmenu”事件监听

        <f:Grid ID="Grid1" runat="server" Title="FineUI Grid右键菜单Demo" CssStyle="margin: 10px;" AllowPaging="true" PageSize="20"
EnableHeaderMenu="false" EnableColumnLines="true" DataKeyNames="ID" >
<Columns>
.....省略
</Columns>
<Listeners>
<f:Listener Event="containercontextmenu" Handler="function (grid, e, eOpts) { e.stopEvent(); F('containerMenu').showAt(e.getXY()); }" />
<f:Listener Event="itemcontextmenu" Handler="function (grid, record, item, index, e, eOpts) { e.stopEvent(); F('itemMenu').showAt(e.getXY()); }" />
</Listeners>
</f:Grid>

这两个事件属于ExtJs的GridPanel控件,参数说明如下:

containercontextmenu:grid:表格对象,e:事件对象,eOpts:事件对象参数;

itemcontextmenu:grid:表格对象,record:选择的行对像(可以通过record.rawData属性获得所选行的全部数据),item:html元素对象,index:行索引,e:事件对象,eOpts:事件对象参数;

如有其它想了解的地方,请去翻查ExtJs的Api doc http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.Panel

一般情况下,照抄上面的代码就Ok了,除非你对事件处理函数有更多的要求。

step4:实现菜单功能。按照正常的方法绑定菜单按钮的事件就可以了,没什么需要特别说明的

在step2的代码里可以看到,已经为添加和修改按钮添加了服务端OnClick事件绑定。下面看一下后台代码的实现

        protected void OnAddClick(object sender, EventArgs e)
{
FineUI.Alert.Show("Add Click!", FineUI.MessageBoxIcon.Information);
} protected void OnEditClick(object sender, EventArgs e)
{
var selectedrow = Grid1.Rows[Grid1.SelectedRowIndex].DataKeys[].ToString();
FineUI.Alert.Show(string.Format("修改ID为{0}的记录", selectedrow), FineUI.MessageBoxIcon.Warning);
}

原创文章,转载请注明出处!

FineUI Grid控件右键菜单的实现的更多相关文章

  1. WPf 带滚动条WrapPanel 自动换行 和控件右键菜单

    原文:WPf 带滚动条WrapPanel 自动换行 和控件右键菜单 技能点包括 WPf 样式的引用 数据的验证和绑定 比较适合初学者 前台: <Window.Resources> < ...

  2. FineUI Grid控件高度自适应

    引言 页面里使用f:Grid控件,添加分页功能,然后高度填充整个页面. 如何使用 使用FineUI 控件的每个页面都有一个f:PageManager控件,它包含属性:AutoSizePanelID,设 ...

  3. MFC小型工具通用界面框架CLIST控件+右键菜单功能

    MFC-小型工具通用界面框架 0x1 场景 由于工作需要我会写代码开发工具给客户或者同事用.代码都能实现,但写个黑乎乎的命令行工具给别人用确实显得不够专业,用别人写好的成型工具又担心有后门. 所以掌握 ...

  4. win32 listctrl控件右键菜单的实现

    HMENU Menu_list,Menu_all; POINT point; HINSTANCE hInstance;//下面代码放到BOOL WINAPI DialogProc下 case WM_C ...

  5. 扩展ToolBarManager、ListView和Grid控件以实现气球式的ToolTip

    原文:扩展ToolBarManager.ListView和Grid控件以实现气球式的ToolTip infragistics是全球领先的UI工具和用户体验的专家,Infragistics开发了一系列的 ...

  6. LabVIEW,控件快捷菜单,温度转换

    目前正在自学LabVIEW,深感困难重重,我将偶尔发表一些自己的收获,自认为算是干货了, 搜到这篇随笔的朋友们或多或少遇到了些许困难,希望这能帮助到你们. 内容:练习使用LabVIEW中的控件快捷菜单 ...

  7. 完全使用一组 DSL 来操作 Grid 控件

    最近尝试了一下将 XtraGrid 的初始化工作封装成内部 DSL,例如一个普通的基础数据的增删改查操作的代码会像下面这样: public partial class UserForm : XtraF ...

  8. WPF平台Grid控件性能比较

    WPF官方发布第一个版本至今已经有10年了, 我们几乎在同时也开始了XAML开发.即使经过多年打造,我们依旧尝试提高:我们真的成功打造了高效灵活的控件吗?我没有在其他地方找到任何关于优秀的WPF表格性 ...

  9. 实现控件WPF(4)----Grid控件实现六方格

    PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 利用Grid控件能很轻松帮助我们实现各种布局.上面就是一个通过Grid单元格 ...

随机推荐

  1. [SQL Basics] Indexes

    An index is used to speed up searching in the database. By default, when you create this table, your ...

  2. Swift学习之常用UI的使用

    Swift学习之常用UI的使用 最近笔者在开始学习苹果最新的编程语言,因为笔者认为,苹果既然出了这门语言就绝对不会放弃,除非苹果倒闭了(当然这里知识一个玩笑). 所以在不久的将来,swift绝对是iO ...

  3. PHP中使用CURL之php curl详细解析

    在正式讲怎么用之前啊,先提一句,你得先在你的PHP环境中安装和启用curl模块,具体方式我就不讲了,不同系统不同安装方式,可以google查一下,或者查阅PHP官方的文档,还挺简单的. 1. 拿来先试 ...

  4. 自学提高:JVM点滴

    写在前面 这年头就是得不断地学习. 学什么东西就看需要了. 不学习很难进步. 同时别人也会超过你. 东西都是网上有的.图片也好,文字也好.基本都可以在网上找到. JAVA运行原理 JVM包括字节码解释 ...

  5. jquery中filter的用法

    一.filter的参数类型可分为两种 1.传递选择器 $('a').filter('.external') 2.传递过滤函数 $('a').filter(function(index) {       ...

  6. 使用Chrome快速实现数据的抓取(一)——概述

    对于一些简单的网页,我们可以非常容易的通过Develop Tool来获取其请求报文规律,并仿照其构建报文来获取页面信息.但是,随着网页越来越复杂,许多页面是由js动态渲染生成的.要获取这类信息,则需要 ...

  7. pytest文档17-fixture之autouse=True

    前言 平常写自动化用例会写一些前置的fixture操作,用例需要用到就直接传该函数的参数名称就行了.当用例很多的时候,每次都传这个参数,会比较麻烦. fixture里面有个参数autouse,默认是F ...

  8. git&amp;github学习【尚硅谷】

    2019/01/17 18:22 集中式版本工具会有单点故障的问题 分布式版本工具能够避免单点故障 git在本地的结构: 团队内部协作: pull  push  add  commit  等等 关于g ...

  9. 深入理解JVM - 虚拟机类加载机制 - 第七章

    类加载的时机类从被加载到虚拟机内存开始,到卸载出内存为止,它的整个生命周期包括了:加载/验证/准备/解析/初始化/使用/卸载七个阶段.其中验证/准备和解析统称为连接(Linking). 加载.验证.准 ...

  10. Selenium3+python自动化-iframe

    一.frame和iframe区别 Frame与Iframe两者可以实现的功能基本相同,不过Iframe比Frame具有更多的灵活性. frame是整个页面的框架,iframe是内嵌的网页元素,也可以说 ...