Yiyang easy UI part of the problem solving series [DataGrid complex table header]

1. Merge the table header information of the DataGrid [basic], and try to extend the example of easy API

Part:

PartCode:

$ ('# DG' ). DataGrid ({URL: geturl (), method: 'Post' , Fitcolumns:  True  , Pagination: ispage, rownumbers:  True  , Singleselect:  True  , Nowrap:  False  , Pagelist :[ 15, 30, 45, 60], Columns: [[{field: 'Insureno', Title: 'policy', width: 150, align: 'center', formatter: outputformatter, rowspan: 2 }, {Field: 'Applicant', Title: 'policyholder ', width: 110, align: 'center', rowspan: 2 }, {Field: 'Insurant', Title: 'policyholder ', width: 110, align: 'center', rowspan: 2 }, {Field: 'Companyname', Title: 'Insurance Company ', width: 120, align: 'center', rowspan: 2 }, {Field: 'Productshow', Title: 'product type', width: 150, align: 'center', rowspan: 2 }, {Field: 'Getmoney', Title: 'premium ', align: 'center', width: 90, align: 'center', formatter: moneyformatter, rowspan: 2 }, {Field: 'Payename', Title: 'payee ', width: 80, align: 'center', rowspan: 2 },{ Title: 'Status', align: 'center', colspan: 5 }, {Field: 'Id', Title: 'operation', align: 'center', width: 60, rowspan: 2 , Formatter:  Function  (Value, row, index ){  VaR A = "<a href = 'javascript: View (" + value + ") '> View </a>" ; Return  A ;}}], [{field: 'Outstatename', Title: 'Out of order status', width: 80, align: 'center' , Formatter: outstateformatter}, {field: 'Receivestatename', Title: 'receipt State', width: 80, align: 'center' , Formatter: receivestateformatter}, {field: 'Paystatename', Title: 'payment State', width: 80, align: 'center' , Formatter: paystateformatter}, {field: 'Sendstatename', Title: 'sending statename ', width: 80, align: 'center' , Formatter: sendstateformatter}, {field: 'Recestatename', Title: 'receipt status ', width: 80, align: 'center', Formatter: recestateformatter}]}); 

View code

You should be able to understand the code.

 

 

====================================== I am Yan yangfangzhu, welcome to join the group: 193247142 (Web rich resource group) ============

Upgrade it. Now you need to understand the principle.

:

 

Let me talk about the code below, so that you can use it as you like.

 1 $ ('# DG' ). DataGrid ({ 2   URL: geturl (),  3 Method: 'post' ,  4 Fitcolumns: True  ,  5   Pagination: ispage,  6 Rownumbers: True  ,  7 Singleselect: True ,  8 Nowrap: False  ,  9 Pagelist: [15, 30, 45, 60 ],  10   Columns :[[  11 {Field: 'insureno', Title: 'warranty No. ', width: 150, align: 'center', formatter: outputformatter, rowspan: 2 },  12 {Title: 'Basic information', align: 'center', colspan: 5 }, 13 {Field: 'payename', Title: 'payee ', width: 80, align: 'center', rowspan: 2 },  14 {Title: 'status', align: 'center', colspan: 5 },  15 {Field: 'id', Title: 'operation', align: 'center', width: 60, rowspan: 2 ,  16 Formatter: Function  (Value, row, index ){  17                        VaR A = "<a href = 'javascript: View (" + value + ") '> View </a>";  18                        Return  A;  19   }  20   }  21   ], [  22 {Field: 'applicant ', Title: 'policyholder', width: 110, align: 'center', rowspan: 2 },  23 {Field: 'insurant', Title: 'policyholder ', width: 110, align: 'center', rowspan: 2},  24 {Field: 'companyname', Title: 'insurers ', width: 120, align: 'center', rowspan: 2 },  25 {Field: 'productshow ', Title: 'product type', width: 150, align: 'center', rowspan: 2 },  26 {Field: 'getmoney', Title: 'premium ', align: 'center', width: 90, align: 'center', formatter: moneyformatter, rowspan: 2 }  27   ,  28 {Field: 'outstatename', Title: 'outgoing ticket status', width: 80, align: 'center' , Formatter: outstateformatter },  29 {Field: 'receivestatename', Title: 'receipt State', width: 80, align: 'center' , Formatter: receivestateformatter },  30 {Field: 'paystatename ', Title: 'payment State', width: 80, align: 'center' , Formatter: paystateformatter },  31 {Field: 'sendstatename', Title: 'sending statename', width: 80, align: 'center' , Formatter: sendstateformatter },  32 {Field: 'recestatename', Title: 'receipt status', width: 80, align: 'center' , Formatter: recestateformatter },  33   34   35   ]  36   37   ]  38 });

We will focus on the columns attributes:

The overall structure is like this [some columns A], [some columns B]

First, we have two rows in the header. Therefore, in column A series, rowspan: 2

At the place where the columns are merged, we only display the text in the header, add the title attribute, and use colspan to equals 5. Then we add another column for testing, and then to a merged place, colspan = 5

We can consider the two merging locations as a placeholder, each of which occupies five columns.

Now, let's look at the second [Column B series].

Here, the order is very important. There are 10 placeholders from top to bottom, that is, two placeholders corresponding to the top, 5 and 5 lengths. The first one uses the colspan position, 6-10 to the second

Do you understand?

 

 

====================================== I am Yan yangfangzhu, welcome to join the group: 193247142 (Web rich resource group) ============

Next, let's take a look at your understanding. You really need to master the skills.

:

Code:

$ ('# DG' ). DataGrid ({URL: geturl (), method: 'Post' , Fitcolumns: True  , Pagination: ispage, rownumbers:  True  , Singleselect:  True  , Nowrap:  False  , Pagelist :[ 15, 30, 45, 60 ], Columns: [[{field: 'Insureno', Title: 'policy', width: 150, align: 'center', formatter: outputformatter, rowspan: 3 },{ Title: 'Basic info', align: 'center', colspan: 5 }, {Field: 'Payename', Title: 'payee ', width: 80, align: 'center', rowspan: 3 },{ Title: 'Status', align: 'center', colspan: 5 }, {Field: 'Id', Title: 'operation', align: 'center', width: 60, rowspan: 3 , Formatter:  Function  (Value, row, index ){  VaR A = "<a href = 'javascript: View (" + value + ") '> View </a>" ;  Return  A ;}}], [{field: 'Applicant', Title: 'policyholder ', width: 110, align: 'center', rowspan: 2 }, {Field: 'Insurant', Title: 'policyholder ', width: 110, align: 'center', rowspan: 2 }, {Field: 'Companyname', Title: 'Insurance Company ', width: 120, align: 'center', rowspan: 2 }, {Field: 'Productshow', Title: 'product type', width: 150, align: 'center', rowspan: 2 }, {Field: 'Getmoney', Title: 'premium ', align: 'center', width: 90, align: 'center', formatter: moneyformatter, rowspan: 2 },{ Title: 'Basic status', align: 'center', colspan: 3 },{ Title: 'Advanced status', align: 'center', colspan: 2 }], [{Field: 'Outstatename', Title: 'Out of order status', width: 80, align: 'center' , Formatter: outstateformatter}, {field: 'Receivestatename', Title: 'receipt State', width: 80, align: 'center' , Formatter: receivestateformatter}, {field: 'Paystatename', Title: 'payment State', width: 80, align: 'center' , Formatter: paystateformatter}, {field: 'Sendstatename', Title: 'sending statename ', width: 80, align: 'center' , Formatter: sendstateformatter}, {field: 'Recestatename', Title: 'receipt status ', width: 80, align: 'center', Formatter: recestateformatter},]}); 

Right. We have three rows in total. The first row is filled with two placeholders, each with a length of 5

In the placeholder of the second length of 5, we continue to open up placeholders, basic states and advanced States. Where are the specific columns of these faces?

Right. We will continue to add a [ranking in the previous [] below, which is related to the order.

Do you understand?

====================================== I am Yan yangfangzhu, welcome to join the group: 193247142 (Web rich resource group) ============

Exclusive eccentric, custom header, note that the column here can not be set to any width, otherwise the width will be misplaced, but there is a solution

1. Define a table and use class = "easyui-DataGrid"

<Table class = "easyui-DataGrid" id = "DG"> <thead> <tr> <TH data-Options = "field: 'insureno', align: 'center ', formatter: outputformatter "rowspan =" 2 ">Warranty No. </Th> <TH data-Options = "field: 'applicant', align: 'center'" rowspan = "2"> Policyholder </Th> <TH data-Options = "field: 'insurant', align: 'center'" rowspan = "2"> Insured </Th> <TH data-Options = "field: 'companyname', align: 'center'" rowspan = "2"> Insurance Companies </Th> <TH data-Options = "field: 'productshow', align: 'center'" rowspan = "2"> Product Type </Th> <TH data-Options = "field: 'getmoney', align: 'center'" rowspan = "2"> Premium </Th> <TH data-Options = "field: 'payename', align: 'center', formatter: moneyformatter" rowspan = "2"> Payee </Th> <TH data-Options = "field: 'productshow', align: 'center'" rowspan = "2"> Product Type </Th> <TH colspan = "5"> Status </Th> <TH data-Options = "field: 'id', align: 'center', formatter: viewc" rowspan = "2"> Operation </Th> </tr> <TH data-Options = "field: 'outstatename', align: 'center', formatter: outstateformatter"> Outgoing ticket status </Th> <TH data-Options = "field: 'receivestatename', align: 'center', formatter: receivestateformatter"> Collection status </Th> <TH data-Options = "field: 'paystatename', align: 'center', formatter: paystateformatter">Payment status </Th> <TH data-Options = "field: 'sendstatename', align: 'center', formatter: sendstateformatter"> Sending status </Th> <TH data-Options = "field: 'recestatename', align: 'center', formatter: recestateformatter"> Acceptance status </Th> </tr> </thead> </table>

Table definition. Define a table header.

② Start JavaScript and add the remaining attributes

 
$ ('# DG'). DataGrid ({URL: geturl (), method:'Post', Fitcolumns:True, Pagination: ispage, rownumbers:True, Singleselect:True, Nowrap:False, Pagelist :[15, 30, 45, 60]});
 

Of course, you can also write it in the above table

<Table class = "easyui-DataGrid" style = "width: 400px; Height: 250px"Data-Options = "url: 'datagrid _ data. json', fitcolumns: True, singleselect: True">
 

:

 

I am Yan yangfangzhu. Welcome to join the group:193247142 (rich Web Resource Group)