RDIFramework.NET框架Web中datagrid与treegrid控件自动生成右键菜单与列标题右键菜单

Posted 2020-07-12 .NET敏捷开发框架

　　在实际应用中常可以看到数据展示控件有右键菜单的功能，对应的列标题也可以右键弹出快捷菜单设置指定列的显示与隐藏等功能。在我们的RDIFramework.NET Web框架中，只要是使用了EasyUI的DataGrid与TreeData控件我们已经做了扩展，所有datagrid与treegrid控件都自动拥有了列标题右键弹出快捷菜单设置指定列的显示与隐藏的功能。 　　1、对于datagrid数据列表区域的右键弹出菜单只需要设置EasyUI的“onRowContextMenu”属性为：pageContextMenu.createDataGridContextMenu即可。 　　2、对于treegrid数据列表区域的右键弹出菜单只需要设置EasyUI的“onContextMenu”属性为：pageContextMenu.createTreeGridContextMenu即可。

　　在实际应用中常可以看到数据展示控件有右键菜单的功能，对应的列标题也可以右键弹出快捷菜单设置指定列的显示与隐藏等功能。在我们的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框架官方公众微信（微信号：guosisoft），及时了解最新动态。

       扫描二维码立即关注