Rdiframework.net the DataGrid and Treegrid controls in the framework Web automatically generate the right-click menu and the column header right-click menu

In the actual application can often see the data display control has the function of the right-click menu, the corresponding column headings can also be right-click popup shortcut menu settings to specify the display and hidden columns and other functions. In our rdiframework.net Web framework, as long as the DataGrid and Treedata controls that use Easyui have been extended, All DataGrid and Treegrid controls automatically have a column header right-click Popup shortcut menu to set the display and hidden functionality of the specified column.

1, for the DataGrid data List area of the right-click Pop-up menu only need to set Easyui "onrowcontextmenu" property is: Pagecontextmenu.createdatagridcontextmenu can be.

2, for the Treegrid data List area of the right-click Pop-up menu only need to set Easyui "oncontextmenu" property is:Pagecontextmenu.createtreegridcontextmenu can be.

The reference code is given later. Here's how the two right-click menu works.

The DataGrid Reference JS code is as follows:

$ (' #list '). DataGrid ({Url:actionurl + ' Gridpagelistjson ', toolbar: ' #toolbar ', title: "Product List", Iconcls: ' Icon16_table ', Width:winsize.width,height:winsize.height,nowrap:false,//Folding line rownumbers:true,//Line number striped:true,//interlaced IDfield: ' ID ' ,//Primary key Singleselect:true,//Radio Sortname: ' Createon ', SortOrder: ' DESC ', Onrowcontextmenu: Pagecontextmenu.createdatagridcontextmenu,ondblclickrow:function (RowIndex, RowData) {document.getElementById (' A_ Edit '). Click ();},frozencolumns: [[{field: ' ck ', checkbox:true},{title: ' Product Code ', field: ' PRODUCTCODE ', width:150},{ti        Tle: ' Product name ', field: ' PRODUCTNAME ', width:300}]],columns: [[{title: ' Primary key ', field: ' ID ', width:120, hidden:true}, {title: ' Product model ', field: ' ProductModel ', width:150},{title: ' Product Specifications ', field: ' Productstandard ', width:75},{title: ' Products Category ', field: ' ProductCategory ', width:70},{title: ' Product Unit ', field: ' Productunit ', width:63},{title: ' Benchmark price ', field: ' Midd Lerate ', width:60},{title: ' Benchmark Factor ', field: ' Referencecoefficient ', width:60},{title: ' Unit price ', field: ' Productprice ', width:60},{title: ' Wholesale price ', field: ' Wholesaleprice ', width:60},{title: ' Promotional price ', fie LD: ' Promotionprice ', width:60},{title: ' Internal price ', field: ' Internalprice ', width:60},{title: ' Special Price ', field: ' Specialprice ', width:60},{title: ' Void flag ', field: ' ENABLED ', width:56,align: ' Center ', formatter:function (V, D, i) {return '  ';}},{title: ' Product Description ', field: ' ProductDescription ', width:200}]],pagination:true,pag Esize:20,pagelist: [+, ten, 50],onloadsuccess:function (data) {var panel = $ (this). DataGrid (' Getpanel '); var tr = pan El.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" });});});}});

The

Treegrid reference JS code is as follows:

$ (' #organizeGrid '). Treegrid ({toolbar: ' #toolbar ', width:winsize.width,height:winsize.height,nowrap:true,rownu Mbers: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: ' Name ', field: ' FullName ', width:200},{title: ' Code ', field: ' Code ', width:100}]],columns: [[{ Title: ' Abbreviation ', field: ' ShortName ', width:120},{title: ' Master ', field: ' Manager ', width:70, align: ' center '},{title: ' Phone ', field: ' Outerphone ', width:100, align: ' center '},{title: ' Fax ', field: ' 传真 ', width:100, align: ' center '},{title: ' Effective ', field: ' Enabled ', width:50, align: ' center ', formatter:imgcheckbox},{title: ' Sort ', field: ' Sortcode ', width:80, Align: ' center '},{title: ' Remarks ', field: ' Description ', width:300}]]});

　　

List of related articles:

Rdiframework.net-based on. NET rapid Information System development Framework-Series catalogue

For a few years, thanks to the supporters and users of the rdiframework.net framework, you can find out more at the address below.

rdiframework.net official website:http://www.rdiframework.net/

rdiframework.net Official blog:http://blog.rdiframework.net/

At the same time need to be explained, all the technical articles in the future to the official website as the subject, welcome to our collection!

rdiframework.net Framework by the professional team for a long time to build, has been updated, has been upgrading, please rest assured that use!

Welcome to Rdiframework.net Framework Official public (No.:rdiframework-net), keep abreast of the latest developments.

Scan QR code for immediate attention

Rdiframework.net the DataGrid and Treegrid controls in the framework Web automatically generate a right-click menu and a column header right-click menu