RDIFramework.NET框架Web中datagrid与treegrid控件自动生成右键菜单与列标题右键菜单-阿里云开发者社区

开发者社区> 老朱第一> 正文

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

简介:
+关注继续查看

 在实际应用中常可以看到数据展示控件有右键菜单的功能,对应的列标题也可以右键弹出快捷菜单设置指定列的显示与隐藏等功能。在我们的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,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JAVA之旅(五)——this,static,关键字,main函数,封装工具类,生成javadoc说明书,静态代码块
JAVA之旅(五)——this,static,关键字,main函数,封装工具类,生成javadoc说明书,静态代码块 一.this关键字 用于区分局部变量和成员变量同名的情况 this的特点 this就代表本类对象 这在我们的set方法里面是有的 public void setName(String name) { this.
1092 0
ML之FE:基于单个csv文件数据集(自动切分为两个dataframe表)利用featuretools工具实现自动特征生成/特征衍生
ML之FE:基于单个csv文件数据集(自动切分为两个dataframe表)利用featuretools工具实现自动特征生成/特征衍生
36 0
ML之FE:基于load_mock_customer数据集(模拟客户,单个DataFrame)利用featuretools工具实现自动特征生成/特征衍生
ML之FE:基于load_mock_customer数据集(模拟客户,单个DataFrame)利用featuretools工具实现自动特征生成/特征衍生
20 0
基于DataFlux进行养猪场实时数据模拟生成和分析实践
摘要:DataFlux是驻云科技的实时大数据分析平台。经过对养猪场的数据分析需求,使用DataMock数据模拟器模拟生成原始数据并上传至DataFlux,快速实现了对养猪场数据的分析全流程。 注:本次业务分析、模拟数据分析生成和实践主要为培训和演示用途,旨在快速了解DataMock和DataFlux进行实时数据分析的功能和流程。
804 0
图片base64编码利器:在线 Data URI 生成工具 – Duri.me
  这篇文章介绍一款在线的图片 base64 编码利器 — Duri.me。data URI 图片是 base64 编码的图片文件,可以嵌入到 HTML 或者 CSS 文件中,能够减少 HTTP 请求,提高网页加载速速。
796 0
代码生成框架Velocity
代码生成框架VelocityVelocity是一个基于Java的模板引擎,用户可以使用模板语言VTL来引用由Java代码定义的对象。
1012 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11889 0
wordpress 生成自定义 meta box
工具 https://jeremyhixon.com/tool/wordpress-meta-box-generator/ 使用 生成代码 /** * Generated by the WordPress Meta Box generator * at http://jeremyhixon.
1043 0
+关注
43
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载