Jquery easyui sets different alignment modes for the DataGrid column names and data columns respectively)

The requirements are as follows:

Three existing data Columns

Name, age, createdate

Data

John,-12-09: 12: 34: 56

Li Si, 28, 2000-12-09: 12: 34: 56

Wang Ma Zi,-12-09: 12: 34: 56

Column settings in jquery easyui DataGrid

{Field: 'name', Title: 'name', width: 120, align: Left },
{Field: 'age', Title: 'age', width: 120, align: right },
{Field: 'createdate', Title: 'creation date', width: 120, align: Center },

The above align attribute is valid for both the list name and data, that is, the column name and Data Alignment are the same,

---------------------------------------------------------------

To be different, you must be able to separately set the column name or data row and add a field to the column,

The first method is to addDataalignValid for data Columns

{Field: 'name', Title: 'name', width: 120, align: Center, dataalign: Left },
{Field: 'age', Title: 'age', width: 120, align: Center, dataalign: right },
{Field: 'createdate', Title: 'creation date', width: 120, align: Center, dataalign: Left },

 

Add the following in onloadsuccess:Code, Repeat each data column

123456789101112131415161718

Onloadsuccess: Function (Data ){ VaR Fields = $ ( "# TT" ). DataGrid ( 'Getcolumnfields' , False ); // Get each row of the data table, note that if the. datagrid-view2 limit is not added, it contains the row number table VaR Bodytts = $ ( ". Datagrid-view2. DataGrid-body table tr. DataGrid-row" ); Bodytts. Each ( Function (II, objj ){ // The TD of each tr of the DataGrid subject table VaR Bodytds = $ (objj). Children (); Bodytds. Each ( Function (I, OBJ ){ // Obtain the information of the current column VaR Col = $ ( "# TT" ). DataGrid ( 'Getcolumnoption' , Fields [I]); If (! Col. Hidden &&! Col. checkbox) { VaR Dataalign = col. dataalign | col. Align | 'Left' ; $ ( "Div: First-child" , Obj).css ( "Text-align" , Dataalign ); } }) }) }

The disadvantage of this method is that there are a lot of data, so it takes a lot of time to traverse the data.

---------------------------------------------------------------

In the second method, assume that align in column is effective for data, and add anotherHeadalignTo set the column alignment in the header.

{Field: 'name', Title: 'name', width: 120, align: Center, headalign: Left },
{Field: 'age', Title: 'age', width: 120, align: Center, headalign: right },
{Field: 'createdate', Title: 'creation date', width: 120, align: Center, headalign: Left },

 1  Onloadsuccess: function (data ){  2       VaR Fields = $ ( "  # TT  " ). DataGrid ( '  Getcolumnfields  ' , False  );  3       //  The first tr Td of the table in the DataGrid header, that is, the columns set.  4       VaR Panel = $ ( "  # TT  " ). DataGrid ( "  Getpanel  "  );  5       VaR Headertds = panel. Find ("  . Datagrid-view2. DataGrid-header. DataGrid-header-inner table TR: First-child  "  ). Children ();  6   7       //  Reset the alignment of the List Header  8   Headertds. Each (function (I, OBJ ){  9           VaR Col = $ ( "  # TT  " ). DataGrid ( '  Getcolumnoption  '  , Fields [I]);  10           If (! Col. Hidden &&! Col. checkbox)  11   {  12              VaR Headalign = col. headalign | col. Align | '  Left  '  ;  13 $ ( "  Div: First-child  " , Obj).css ( "  Text-align  "  , Headalign );  14   }  15   })  16 }

 

In fact, we can see that the second method has much lower overhead than the first one, so we recommend the second method.

 

Red # TT is the ID of my DataGrid. Change it to your own

Both methods are directly configured + code.

---------------------------------------------------------------

The third method is actually the second method, which is just an extension and easier to use.

 1   /*  *  2   * Extended table column alignment attributes:  3   * Custom Attributes of a column field:  4   * Headalign: the original align attribute is valid for data and headalign is valid for column names.  5   *  6   */    7   $. Extend ($. FN. DataGrid. defaults ,{  8   Onloadsuccess: function (){  9           VaR Target = $ ( This  );  10           VaR Opts = $. Data ( This ,"  DataGrid  "  ). Options;  11           VaR Panel = $ ( This ). DataGrid ( "  Getpanel  "  );  12           //  Retrieve Columns  13           VaR Fields = $ ( This ). DataGrid ( '  Getcolumnfields  ' , False  );  14           //  The first tr Td of the table in the DataGrid header, that is, the columns set.  15           VaR Headertds = panel. Find ( "  . Datagrid-view2. DataGrid-header. DataGrid-header-inner table TR: First-child  "  ). Children ();  16           //  Reset the alignment of the List Header  17   Headertds. Each (function (I, OBJ ){  18               VaR Col = target. DataGrid ( '  Getcolumnoption  '  , Fields [I]);  19               If (! Col. Hidden &&! Col. checkbox)  20   {  21                   VaR Headalign = col. headalign | col. Align |'  Left  '  ;  22 $ ( "  Div: First-child  " , Obj).css ( "  Text-align  "  , Headalign );  23   }  24   })  25   }  26 });

Usage:

Save as the jquery. easyui. datagrid2.js file, reference

Add <SCRIPT src = "jquery. easyui. datagrid2.js" type = "text/JavaScript"> </SCRIPT>

AddHeadalignAttribute

{Field: 'name', Title: 'name', width: 120, align: Center,Headalign: Left}

-------------------------------------------------

Method 4: source code modification, ultimate method

I use the source code of jquery easyui 1.2.4 (Unencrypted) To explain, other versions should not be very different

In fact, it is mainly the text-align attribute above.

Search for text-align in the source code. The following code is available in line 7,929th (in the buildgridheader method)

?

Cell.css ('Text-align', (Col. Align |'Left'));

This statement is used to modify the alignment of the List header. The default value is left, that is, left.

Obviously, the second method is used to add columns.HeadalignAttribute,Change row 7929

?

Cell.css ('Text-align', (Col. headalign | col. Align |'Left'));

Then, it's over, haha.

In fact, if you like Data columnsDataalign, 9496 rows also have text-align (in the renderrow method)

?

Style + ='Text-align :' + (Col. Align |'Left') +';';

It can be used to be equivalent to the first method.

?

Style + ='Text-align :' + (Col. dataalign | col. Align |'Left') +';';

If you like tossingSource code, Please use the fourth type, the simplest, haha

If you like the clean source code with less configuration and less code, you can use the third method.

If you are in trouble, you can use the second or first method.