Dynamic combination column of EasyUI and elastic IRD

Dynamic combination column of EasyUI and elastic IRD

Dojo, ExtJS, Jquery (EasyUI, jQgrid, ligerui, DWZ), server controls in asp.net, and the table tag of HTML tags are also indispensable. Among them, dojo, ExtJS, and Jquery should be considered a parallel relationship. They are all based on JavaScript frameworks, but the learning costs of dojo and ExtJS are higher than those of jquery, and the learning curve is steep, there are few Chinese documents, but dojo and extjs are powerful functions. dojo tends to map. I have been using all kinds of datagrid for several years and have never summarized it. I'm so busy with my work. The most embarrassing thing is that every dataGrid is useless and proficient. In actual use, in addition to Google, du Niang was surprised to only view obscure English documents.

Note: Some people in dojo directly read Pinyin and some people call them beans (homophonic ).

 

Today, we will briefly introduce the dynamic Composite Columns in the DataGrid in EasyUI, which is also a problem encountered in the project, that is, the same report, different users can only view report fields within their permission range after logon. There are two ideas:

Given that there are a lot of cool people, you can understand the general idea of the source code and give up.

2. The column displayed in the dynamic combination uses the datagrid of easyui.

 

Let's take a look.

<table id="dg"></table>

$ ('# Dg'). datagrid ({title: '', loadMsg:" loading data. Please wait ...... ", Height: $ (window ). height ()-31, width: $ (window ). width (), singleSelect: true, selectOnCheck: true, url: 'col. page ', sortName: 'sn', sortOrder: 'desc', remoteSort: false, idField: 'id', columns: [[{field: 'id', title: 'Primary key encoding', hidden: true}, {field: 'name', title: 'field name', width: 100}, {field: 'Alias', title: 'Field alias ', width: 100}, {field: 'sn', title: 'ordered ', width: 100, sortable: true}, {field: 'insdt ', title: 'creation time', width: 220}, {field: 'opuser', title: 'Operation user', hidden: true, width: 100},], onDblClickRow: function (rowIndex, rowData) {upd ();}});

$ ('# Dg'). The part contained in the datagrid () is an Object.

Columns contains a nested array Object.

I should understand the general idea here. Let's look at the implementation code.

Function easyUIDataGrid (medid) {var $ datagrid ={}; var columns = new Array (); $ datagrid. title = ""; $ datagrid. height = $ (window ). height ()-31; $ datagrid. width = $ (window ). width (); $ datagrid. sortName = "dt"; $ datagrid. sortOrder = "desc"; $ datagrid. idField = "id"; var param = {"medid": medid}; $. ajax ({url: 'getcol. page ', type: 'post', data: "medid =" + medid, dataType: "json", async: false, success: function (returnValue ){
// Obtain the column alias to be dynamically generated asynchronously. The width can also be var arr = returnValue; $. each (arr, function (I, item) {columns. push ({"field": item. colname, "title": item. colalias, "width": 100, "sortable": true}) ;}); $ datagrid. columns = new Array (columns); $ ('# dg '). datagrid ($ datagrid); console. log (JSON. stringify ($ datagrid ));}});}

Reprinted please indicate the source http://guanhp2013.cnblogs.com/

If you have any questions, please leave a message.

Author's website: http://www.xyzla.com