Project Summary-jQuery EasyUI-DataGrid dynamic loading of headers

Summary

In the previous two articles, we have introduced how to display the data in the database to the foreground when parameters and no parameters exist in the jQuery EasyUI-DataGrid, however, the headers of the data tables shown in the previous two articles are fixed. If the data displayed on the front-end comes from different tables in the database, the headers also need to be dynamically loaded, in this article, we will take a look at the dynamic loading of headers and data in EasyUI-DataGrid.

 

Implementation

The function we want to implement is to display different data in the DataGrid according to our needs, and the header is also changing. Let's take a look at the page where we want to implement the function.

 

 

Click different nodes on the left, and the data of different DataGrid is displayed on the right.

 

Now let's take a look at the front-end html page code. Because the header is changed, our front-end code is a little different from the previous two blogs.

 

<Divdata-options = "region: 'center', title: 'Assessing object data entry information', iconCls: 'icon-OK '"> <divclass =" demo-info "data-options =" fit: true, border: false, plain: true "> <table id =" dg "title =" evaluation object data calculation score "class =" easyui-datagrid "style =" width: 900px; height: 400px; padding-left: 200px; "data-options =" rownumbers: true, pageSize: 5, pageList: [5, 10, 15, 20], method: 'get ', "pagination =" true "rownumbers =" true "fitcolumns =" false "striped =" true "singleselect =" true "> <thead> </table> </ div> </div>

 

 

Next, let's take a look at the JavaScript code to generate the header code, the quantitative header of the county and city.

 

// Query function reloadgridCityQuanty () {var test = document. getElementById ("NodeChild "). innerHTML; // interacts with common processing programs, and generates the County/City quantitative header $ ('# dg '). datagrid ({url: "CalculateScoreFrameCity. ashx? Test = "+ test, columns: [{field: 'targername', title: 'indicator name', width: 300}, {field: 'conditioninput', title: 'Data entry status', width: 300 },{ field: 'operate', title: 'operation', width: 300}]})}

 

Here, we need to say that we need to create the headers of all the data we want to display here in advance, and then use js statements for dynamic loading.

 

Let's take a look at the header js code, which is essentially the same as above.

 

 

// Query functionreloadgridCharacterizationCity () {var test = document. getElementById ("NodeChild "). innerHTML; // interacts with common processing programs, and generates a qualitative header for counties and cities $ ('# dg '). datagrid ({url: "CalculateScoreFrameCity. ashx? Test = "+ test, columns: [{field: 'name', title: 'indicator name', width: 225}, {field: 'conditioninput', title: 'Data entry information', width: 225}, {field: 'calculateinput', title: 'computing information', width: 225}, {field: 'operate', title: 'operation', width: 225}]})}

 

 

 

The general processing program is the same as the previous two articles. You can refer to the previous article.

 

Let's also look at the effect of another header we created.

 

Summary

Through this article, we can create a header on the front-end based on our needs to display different data in the DataGrid. some people may notice that the data displayed in this article is different from the data displayed in the previous two articles. The data displayed in the DataGrid table in the previous article is all from the database table, the data shown in this article is not directly from the database, but is manually spliced. We will introduce the specific implementation in the next article.