在实际应用中常可以看到数据展示控件有右键菜单的功能，对应的列标题也可以右键弹出快捷菜单设置指定列的显示与隐藏等功能。在我们的RDIFramework.NET Web框架中，只要是使用了EasyUI的DataGrid与TreeData控件我们已经做了扩展，所有datagrid与treegrid控件都自动拥有了列标题右键弹出快捷菜单设置指定列的显示与隐藏的功能。
1、对于datagrid数据列表区域的右键弹出菜单只需要设置EasyUI的“onRowContextMenu”属性为：pageContextMenu.createDataGridContextMenu即可。
2、对于treegrid数据列表区域的右键弹出菜单只需要设置EasyUI的“onContextMenu”属性为：pageContextMenu.createTreeGridContextMenu即可。
后面会给出参考代码。下面就是两个右键菜单的展示效果。
DataGrid参考Js代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
$('#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代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
$('#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的快速信息化系统开发框架 — 系列目录
本文转自yonghu86博客园博客，原文链接：http://www.cnblogs.com/huyong/p/5523276.html，如需转载请自行联系原作者