在实际应用中常可以看到数据展示控件有右键菜单的功能,对应的列标题也可以右键弹出快捷菜单设置指定列的显示与隐藏等功能。在我们的RDIFramework.NET Web框架中,只要是使用了EasyUI的DataGrid与TreeData控件我们已经做了扩展,所有datagrid与treegrid控件都自动拥有了列标题右键弹出快捷菜单设置指定列的显示与隐藏的功能。
1、对于datagrid数据列表区域的右键弹出菜单只需要设置EasyUI的“onRowContextMenu”属性为:pageContextMenu.createDataGridContextMenu即可。
2、对于treegrid数据列表区域的右键弹出菜单只需要设置EasyUI的“onContextMenu”属性为:pageContextMenu.createTreeGridContextMenu即可。
后面会给出参考代码。下面就是两个右键菜单的展示效果。
DataGrid参考Js代码如下:
$('#list').datagrid({ url: actionURL + 'GridPageListJson', toolbar: '#toolbar', title: "产品列表", iconCls: 'icon16_table', width: winSize.width, height: winSize.height, nowrap: false, //折行 rownumbers: true, //行号 striped: true, //隔行变色 idField: 'ID',//主键 singleSelect: true, //单选 sortName: 'CREATEON', sortOrder: 'DESC', onRowContextMenu: pageContextMenu.createDataGridContextMenu, onDblClickRow:function(rowIndex, rowData){ document.getElementById('a_edit').click(); }, frozenColumns: [[ { field: 'ck', checkbox: true }, { title: '产品编码', field: 'PRODUCTCODE', width: 150 }, { title: '产品名称', field: 'PRODUCTNAME', width: 300 } ]], columns: [[ { title: '主键', field: 'ID', width: 120, hidden: true }, { title: '产品型号', field: 'PRODUCTMODEL', width: 150 }, { title: '产品规格', field: 'PRODUCTSTANDARD', width: 75 }, { title: '产品类别', field: 'PRODUCTCATEGORY', width: 70 }, { title: '产品单位', field: 'PRODUCTUNIT', width: 63 }, { title: '基准价', field: 'MIDDLERATE', width: 60 }, { title: '基准系数', field: 'REFERENCECOEFFICIENT', width: 60 }, { title: '单价', field: 'PRODUCTPRICE', width: 60 }, { title: '批发价', field: 'WHOLESALEPRICE', width: 60 }, { title: '促销价', field: 'PROMOTIONPRICE', width: 60 }, { title: '内部价', field: 'INTERNALPRICE', width: 60 }, { title: '特别价', field: 'SPECIALPRICE', width: 60 }, { title: '作废标志', field: 'ENABLED', width: 56, align: 'center', formatter: function (v, d, i) { return '<img src="../../Content/Styles/icon/bullet_' + (v ? "tick.png" : "minus.png") + '" />'; } }, { title: '产品描述', field: 'PRODUCTDESCRIPTION', width: 200 } ]], pagination: true, pageSize: 20, pageList: [20, 10, 30, 50], onLoadSuccess: function (data) { var panel = $(this).datagrid('getPanel'); var tr = panel.find('div.datagrid-body tr'); refreshCellsStyle(tr); var trHead = panel.find('div.datagrid-header tr'); trHead.each(function () { var tds = $(this).children('td'); tds.each(function () { $(this).find('span,div').css({ "font-size": "14px" }); }); }); } });
TreeGrid参考Js代码如下:
$('#organizeGrid').treegrid({ toolbar: '#toolbar', width: winsize.width, height: winsize.height, nowrap: true, rownumbers: true, animate: true, resizable: true, collapsible: false, onContextMenu: pageContextMenu.createTreeGridContextMenu, url: '/FrameworkModules/OrganizeAdmin/GetOrganizeTreeJson', idField: 'Id', treeField: 'FullName', onDblClickRow:function(row){ document.getElementById('btnEdit').click(); }, frozenColumns: [[ { title: '名称', field: 'FullName', width: 200 }, { title: '编码', field: 'Code', width: 100 } ]], columns: [[ { title: '简称', field: 'ShortName', width: 120 }, { title: '主负责人', field: 'Manager', width: 70, align: 'center' }, { title: '电话', field: 'OuterPhone', width: 100, align: 'center' }, { title: '传真', field: 'Fax', width: 100, align: 'center' }, { title: '有效', field: 'Enabled', width: 50, align: 'center', formatter: imgcheckbox }, { title: '排序', field: 'SortCode', width: 80, align: 'center' }, { title: '备注', field: 'Description', width: 300 } ]] });
相关文章列表:
RDIFramework.NET — 基于.NET的快速信息化系统开发框架 — 系列目录
一路走来数个年头,感谢RDIFramework.NET框架的支持者与使用者,大家可以通过下面的地址了解详情。
RDIFramework.NET官方网站:http://www.rdiframework.net/
RDIFramework.NET官方博客:http://blog.rdiframework.net/
同时需要说明的,以后的所有技术文章以官方网站为准,欢迎大家收藏!
RDIFramework.NET框架由专业团队长期打造、一直在更新、一直在升级,请放心使用!
欢迎关注RDIFramework.NET框架官方公众微信(微信号:rdiframework-net),及时了解最新动态。
扫描二维码立即关注
相关推荐
在"WPF分页DataGrid"中介绍了如何实现分页功能,本文中介绍如果实现右键菜单。点击菜单项Age,将Age列隐藏,再点击则显示;并实现移动列后,同步显示。 详见:...
在Asp.net2.0开发中,自定义右键菜单控件是一个常见的需求,它可以为用户提供更加便捷的操作体验。这个源码示例提供了一个实现这一功能的方法,适用于各种Web控件,如DataGrid、ListView等。下面将详细介绍如何在Asp...
在Flex开发中,自定义右键菜单是一项常见的需求,它能为用户界面提供更丰富的交互体验。Flex是一款基于ActionScript 3.0的开源框架,主要用于构建富互联网应用程序(RIA)。在这里,我们将深入探讨如何在Flex中实现...
在ASP.NET中,DataList和DataGrid是两种常用的Web服务器控件,用于显示和操作数据集。当数据量较大时,为了提高用户体验和页面加载速度,通常会采用分页功能来展示数据。在这个主题中,我们将深入探讨如何在DataList...
`DataGrid`是ASP.NET中的一个服务器控件,它能够自动绑定到数据源,并自动生成表格结构来显示数据。这个控件提供了丰富的功能,包括排序、分页、编辑、删除和插入记录等,可以极大地提高开发效率。 2. **数据源的...
在ASP.NET开发中,DataGrid控件是一种常用的用于展示数据集合的控件,它提供了诸如排序、分组、筛选等功能。然而,对于大型数据集,为了提高用户体验,分页功能是必不可少的。本教程将详细介绍如何在ASP.NET环境中,...
ASP.NET中的DataGrid控件是开发Web应用程序时用于展示数据的关键组件,特别是在处理与数据库相关的数据展示场景。熟练掌握DataGrid控件的应用技巧对于任何Web开发者来说都是至关重要的。 DataGrid控件允许以表格的...
在.NET框架中,Datagrid控件是一个非常重要的组件,尤其在ASP.NET环境下,它被广泛用于数据展示和交互。这个控件提供了丰富的功能,能够帮助开发者轻松地在网页上创建表格,显示数据库中的数据,并允许用户进行编辑...
其中最常见的方法是在web forms设计器中增加,通过在控件工具箱中拖访DataGrid控件到web设计页面,然后在属性生成器中增加Columns列;还有一种方式就是在 HTML视图模式下更改HTML代码的方式增加Columns列。本文中将向...
### ASP.NET中DataGrid和DataList控件用法比较 #### 一、概述 在ASP.NET Web应用程序开发中,DataGrid和DataList是用于展示表格数据的重要控件。这两种控件能够有效地帮助开发者以结构化的方式展示数据集,并提供...
在.NET框架中,数据展示是开发用户界面时的关键部分,而Datagrid控件则是实现这一目标的强有力工具。本文将深入探讨.NET环境下功能强大的Datagrid控件,它提供了丰富的功能,如集成打印、数据导出、数据搜索等,极大...
继承asp.net的DataGrid控件实现的表格树控件 /*表格树控件说明 * 此控件继承DataGrid 新增属性说明: * 1.TreeParentCode:顶级根节点parentcode * 2.TreeDisplayDeep:展现表格树深度默认为1 * 3.SumColumns:...
asp.net(vb) datagrid导出为excel asp.net(vb) datagrid导出为excel asp.net(vb) datagrid导出为excel asp.net(vb) datagrid导出为excel
3. **DataGrid控件**: DataGrid是ASP.NET Web Forms中的一个服务器控件,它能显示和编辑结构化数据,如数据库表或XML文件。在这个例子中,DataGrid被设置为可编辑模式,允许用户直接在界面上修改数据。 4. **数据...
在.NET框架中,分页控件是Web应用程序中不可或缺的一部分,它用于处理大量数据的显示,提高用户体验。本文将深入探讨.NET自定义分页控件的设计与实现,以及它的优势和应用。 首先,分页控件是数据展示的核心组件,...
ASP.NET中的DataGrid控件是Web开发中常用的数据展示组件,尤其在处理表格数据时,它的强大功能使得数据呈现和操作变得简单易行。本文将深入探讨如何利用DataGrid控件实现数据排序、自动编号、生成合计项以及将数据...
在VB.NET编程环境中,`DataGridView`控件是一个非常重要的组件,用于显示和操作表格数据。这个控件在Windows Forms应用程序中广泛使用,提供了一种直观的方式来显示和编辑数据集、数组或其他数据源中的数据。本篇...
EasyUI的DataGrid是一款基于jQuery的轻量级前端数据展示组件,它被广泛应用于Web应用中,用于展示和操作结构化的数据。在结合ASP.NET框架时,DataGrid能有效地将服务器端的数据动态地呈现到客户端,提供排序、分页、...
在EasyUI中,我们可以自定义右键菜单项,与datagrid或tree配合,为用户提供定制化的操作选项。 4. Window弹出层: Window是EasyUI中的一个浮动窗口组件,可以用于弹出对话框、展示详细信息或进行操作确认。在这个...