基于FineUI Grid控件添加右键菜单
FineUI官方Demo上一直没有Grid右键菜单的实现,其实从4.1.x的版本开始,允许添加自定义的事件监听(Listeners),所以要实现这个功能已经相当容易了。
ExtJs右键菜单有很多种,对于Grid控件来说,我这里只简单说明两种实现。即在表格的数据行上右键单击时弹出的菜单,以及在空白位置右键单击时弹出的菜单。
时间有限,废话不多说了,先看两个效果图。(实现环境 FineUI4.1.6,.NET 4.0因为需要指定控件的ID)
1. 数据行右键菜单
2. 空白处右键菜单
实现方法:
第一步:添加Grid控件。。。不多说了
第二步:往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>
第三步:为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了,除非你对事件处理函数有更多的要求。
第四步:实现菜单功能。按照正常的方法绑定菜单按钮的事件就可以了,没什么需要特别说明的
在第二步的代码里可以看到,已经为添加和修改按钮添加了服务端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[0].ToString(); FineUI.Alert.Show(string.Format("修改ID为{0}的记录", selectedrow), FineUI.MessageBoxIcon.Warning); }
如何使用FineUI Grid控件,添加分页功能,然后高度填充整个页面。具体请看下面文字说明和代码分析。
使用FineUI 控件的每个页面都有一个f:PageManager控件,它包含属性:AutoSizePanelID,设置需要填充的控件ID,从它的demo可以看出,正常情况下需要再放置一个容器Panel,就可以使整个页面填充。
<f:PageManager ID="PageManager1" runat="server" AutoSizePanelID="ResultSetGrid" /> <f:Grid ID="ResultSetGrid" runat="server" EnableCheckBoxSelect="true" Title="" DataKeyNames="ID" ShowBorder="false" PageSize="3" AllowPaging="true" IsDatabasePaging="true" OnPageIndexChange="ResultSetGrid_PageIndexChange" OnSort="ResultSetGrid_Sort" AllowSorting="true" SortField="ID"> <Toolbars> <f:Toolbar ID="ResultSetGrid_Toolbar" runat="server"> <Items> <f:Button ID="btnAdd" runat="server" Text="添加" OnClientClick="Add();" EnablePostBack="false" Icon="ApplicationAdd"></f:Button> <f:Button ID="btnEdit" runat="server" Text="编辑" EnableAjax="true" OnClick="btnEdit_Click" Icon="ApplicationEdit"></f:Button> <f:Button ID="btnDelete" runat="server" Text="删除" OnClick="btnDelete_Click" Icon="ApplicationDelete"></f:Button> <f:Button ID="btnImport" runat="server" OnClientClick="Import();" Text="数据采集" Icon="ApplicationLink"></f:Button> <f:Button ID="btnSelf" runat="server" OnClientClick="Filter();" Text="自定义筛选" Icon="ApplicationKey"></f:Button> </Items> </f:Toolbar> </Toolbars> <Columns> <f:RowNumberField EnablePagingNumber="true" /> </Columns> </f:Grid>
以上内容是基于FineUI Grid控件添加右键菜单的全部叙述,希望对大家有所帮助。
相关文章
c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)
这篇文章主要介绍了c# WPF中通过双击编辑DataGrid中Cell的示例(附源码),帮助大家更好的理解和学习使用c#,感兴趣的朋友可以了解下...2021-03-03jQuery EasyUI编辑DataGrid用combobox实现多级联动
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧...2016-09-01- 本文实例讲述了JS实现不使用图片仿Windows右键菜单效果代码。分享给大家供大家参考,具体如下:这里演示JS不使用图片仿Windows右键菜单效果,这款代码灵活使用了文鼎字,配合CSS和JS做出了这个和系统右键菜单很相似的东东。...2015-10-23
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
这篇文章主要介绍了如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上,需要的朋友可以参考下...2015-12-28在echarts中图例legend和坐标系grid实现左右布局实例
这篇文章主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-17- 这篇文章主要介绍了C#自定义控件添加右键菜单的方法,本文用到control控件,专门自定义右键菜单,下面小编给大家整理下,有需要的小伙伴可以来参考下...2020-06-25
- 这篇文章主要介绍了Treegrid的动态加载实例代码的相关资料,需要的朋友可以参考下...2016-05-04
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
这篇文章主要介绍了Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法的相关资料,需要的朋友可以参考下...2016-05-04JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
这篇文章主要介绍了JQuery EasyUI datagrid 添加、修改、删除操作的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-25jQuery EasyUI中DataGird动态生成列的方法
EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍EasyUI中DataGird动态生成列的方法...2016-04-06- 这篇文章主要介绍了C#设置右键菜单的方法,实例分析了C#设置右键菜单的相关技巧,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了C#实现改变DataGrid某一行和单元格颜色的方法,主要涉及DataGrid控件的添加与使用、数据源的绑定、单元格与行的获取等操作。需要的朋友可以参考下...2020-06-25
- 大家对于FineUI Grid控件会添加右键菜单吗,下面小编就给大家详细介绍基于FineUI Grid控件添加右键菜单,需要的朋友可以参考下...2020-06-25
- 看了FineUI中的将Grid导出为Excel的实现方法,实际上是可以非常简单。看来很难的问题,变换一种思路就可以非常简单...2021-09-22
- 这篇文章主要为大家详细介绍了jquery自定义右键菜单、全选、不连续选择的相关资料,需要的朋友可以参考下...2016-03-03
- 这篇文章主要介绍了C#实现给DataGrid单元行添加双击事件的方法,较为详细的分析了C#给DataGrid单元添加双击事件的步骤及相关实现代码,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要跟大家分享了Yii 2.0在Grid中格式化时间的相关资料,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。...2017-06-11
- datagrid绑定list没有数据 表头不显示的问题,那是因为 绑定了null,你给list new一下就好 表头就会有啦...2021-09-22
- 这篇文章主要介绍了jqGrid 学习笔记整理——进阶篇(一 )的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要为大家详细介绍了Bootstrap3 Grid system原理及应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-02