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

原创 2016年05月26日 09:08:14

  在实际应用中常可以看到数据展示控件有右键菜单的功能,对应的列标题也可以右键弹出快捷菜单设置指定列的显示与隐藏等功能。在我们的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),及时了解最新动态。

  扫描二维码立即关注

RDIFramework.NET 官方微信

版权声明:本文为博主原创文章,未经博主允许不得转载。

WPf 带滚动条WrapPanel 自动换行 和控件右键菜单

-->

WPF分页DataGrid(二)列右键菜单实现

在"WPF分页DataGrid"中介绍了如何实现分页功能,本文中介绍如果实现右键菜单。见下图:点击菜单项Age,将Age列隐藏,再点击则显示;并实现移动列后,同步显示。要实现功能需要在Loaded事件...

JQueryEasyUI学习笔记(十一)datagrid 右键菜单,冻结列

欢迎大家转载,转载请注明出处! 希望这个笔记对自己和大家有用,但是本人水平有限,如果出错的地方,希望大家指出,多多批评,谢谢! 今天是datagrid框架的冻结列和右键菜单: 废话就...
  • lououi
  • lououi
  • 2014年04月15日 10:13
  • 477

duilib进阶教程 -- 改进List控件(3)_支持多选+右键菜单(ctrl,shift, 鼠标滑动框选)

看到很多PC客户端的列表都支持多选,比如PP助手,华为网盘,duilib本身UIList却没有此功能的支持,于是想修改一把,完善这方面的劣势,而且相信用到的这个功能的也不少,尤其在开发文件管理相关的功...
  • xdrt81y
  • xdrt81y
  • 2014年02月28日 18:06
  • 10267

PyQt4在TextEdit控件中创建右键菜单

今天开发界面遇到一个问题,想将textedit的显示内容及时清空,但是由于系统自带的caidan...

自定义treeview控件,实现右键菜单编辑功能

试过用复合控件包含treeview控件,但是失败,这次在右键菜单调用tree的回发js成功可以在页面后台绑定被编辑的节点,后台3个函数都可以编辑用c#传的参数e.mynode就是右键菜单的选中的节点 ...

添加标题栏右键菜单项的资源

  • 2010年06月30日 17:10
  • 86KB
  • 下载

Duilib中为RichEdit\Edit控件添加自定义右键菜单

前言 Duilib中的RichEdit控件在使用中发现,基本上对复制、粘贴、剪切等快捷方式都是支持的,不过唯一缺点是没有右键菜单,感觉不够好,于是就想着加上右键菜单。 右键菜单基本思路是,在...

c#GroupBox控件添加右键菜单

1.首先GroupBox控件默认没有鼠标事件的,需要在窗体加载时手动添加鼠标事件,这里添加的是MouseDown事件 private void 人力资源主界面_Load(object sender, ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:RDIFramework.NET框架Web中datagrid与treegrid控件自动生成右键菜单与列标题右键菜单
举报原因:
原因补充:

(最多只允许输入30个字)