RDIFramework.NET框架Web中datagrid与treegrid控件自动生成右键菜单与列标题右键菜单...-优快云博客

RDIFramework.NETWeb框架扩展了EasyUI的DataGrid与TreeData控件，实现列标题右键菜单功能，可设置列的显示与隐藏。通过设置特定属性，DataGrid与TreeGrid能自动支持这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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