JQuery easyui-datagrid Dynamic Load Header

Project Summary-jquery easyui-datagrid dynamic load Header

Directory (?) [-]

1. Profile
2. Realize
3. Summarize

Overview

In the previous two articles,We have introduced theJQuery Easyui-datagrid The data in the database is displayed to the foreground , but for the data header shown in the previous two articles is fixed , If we show data from the database to the foreground from different tables , so the table header also needs dynamic loading , This article we'll look at easyui-datagrid.

Realize

the function we want to implement is to let the DataGrid display different data according to our needs, and the header is also changing , so we can start by looking at the page where we want to implement the function .

We click on the different nodes on the left , and the data on the right side will be displayed for different DataGrid .

Now let's look at the code of the foreground HTML page , because the table header is changed , so our foreground code is a little different from the previous two blog posts .

[HTML]View Plaincopyprint?

2. <divdata-optionsdivdata-options="region: ' Center ', title: ' Test Object Data Entry status ', Iconcls: ' Icon-ok '">
4. <divclassdivclass= "demo-info"data-options="Fit:true,border:false,plain:true" >
8. <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 ',"
10. pagination="true" rownumbers= "true"fitcolumns= "false" striped= "true"singleselect= "true" >
12. <thead>
14. </thead>
18. </Table>
20. </div>
24. </div>

<divdata-options= "region: ' Center ', title: ' Test Object Data Entry status ', 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>                        </thead>                     </ table>           </div>         </div>

Next we look at the JS code to generate the table header code , the County Urban Quantitative table header .

[JavaScript]View Plaincopyprint?

2. Calculation of quantitative index in county and urban area
4. function Reloadgridcityquanty () {
6. var test =document.getelementbyid ("Nodechild"). InnerHTML;
10. //Interact with the general handler and generate a quantitative table header for the county and city
12. $ (' #dg '). DataGrid ({
14. URL:"calculatescoreframecity.ashx?test=" + Test,
16. Columns: [[
18. {field: ' Targername ', title: ' indicator name ', width:300},
20. {field: ' Conditioninput ', title: ' Data entry status ', width:300},
22. {field: ' Operate ', title:' operation ', width:300}
24. ]]
28. })
30. }

The calculation of quantitative index in county and urban area query            function Reloadgridcityquanty () {                var test =document.getelementbyid ("Nodechild"). InnerHTML ;                 Interact with the general handler and generate the County Urban Quantitative table header                $ (' #dg '). DataGrid ({                    URL: "calculatescoreframecity.ashx?test=" + Test,                    Columns: [[                    {field: ' Targername ', title: ' Indicator name ', width:300},                    {field: ' Conditioninput ', title: ' Data Entry status ', Width:3 XX},                    {field: ' Operate ', title: ' Operation ', width:300}                    ]]}                 )            }

What we need to say here is that we need to create the header of all the data we want to display here , and then dynamically load it with the JS statement .

Let's look at the JS code for the table header , which is essentially the same as above .

[JavaScript]View Plaincopyprint?

2. The county urban area qualitative calculation situation inquiry
4. Functionreloadgridcharacterizationcity () {
6. var test =document.getelementbyid ("Nodechild"). InnerHTML;
10. //Interact with general handlers, and generate county-level qualitative header
12. $ (' #dg '). DataGrid ({
14. URL:"calculatescoreframecity.ashx?test=" + Test,
16. Columns: [[
18. {field: ' name ', title:' indicator name ', width:225},
20. {field: ' Conditioninput ', title: ' Data entry status ', width:225},
22. {field: ' Calculateinput ', title: ' Calculate case ', width:225},
24. {field: ' Operate ', title:' operation ', width:225}
26. ]]
30. })
34. }

           County urban area Qualitative calculation Query            functionreloadgridcharacterizationcity () {                var test =document.getelementbyid ("Nodechild"). InnerHTML;                 Interact with the general handler and generate the county Urban Qualitative table header                $ (' #dg '). DataGrid ({                    URL: "calculatescoreframecity.ashx?test=" + Test,                    Columns: [[                    {field: ' Name ', title: ' Indicator name ', width:225},                    {field: ' Conditioninput ', title: ' Data entry situation ', width:225},< c9/>{field: ' Calculateinput ', title: ' Calculation case ', width:225},                    {field: ' Operate ', title: ' Operation ', width:225}                    ]                 })             }

About the general process of writing and the previous two articles are the same , you can refer to the previous article .

We also look at the effect of another header we created

Summarize

Through this article we can be at the front desk according to our needs,To create the headers we need.,With this indatagrid Displays different data ., Front article datagrid The data displayed in the table is all from the database table ,,< Span style= "Font-family:simsun;" lang= "ZH-CN" is our manual stitching into , As to the specific implementation we introduce in the next article

JQuery easyui-datagrid Dynamic load header