JQuery easyui DataGrid column name and data column set different alignment (GO)

Requirements are as follows

Existing data column three columns

Name,age,createdate

Data

Zhang San, 18,2000-12-09:12:34:56

John Doe, 28,2000-12-09:12:34:56

Pock, 38,2000-12-09:12:34:56

Jquery easyui column settings in the DataGrid

{field: ' Name ', title: ' Names ', width:120, align:left},
{field: ' Age ', Title: ' Ages ', width:120, align:right},
{field: ' CreateDate ', title: ' Creation Date ', Width:120,align:center},

The Align property above is valid for both the list name and the data, that is, the column name and the data alignment are the same,

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

To be different, you must be able to set column names or data rows separately, and add a field to column

First, assuming that the align is valid for the column name, you can add a dataalign that is valid for the data column

{field: ' Name ', title: ' Names ', width:120, align:center,dataalign:left},
{field: ' Age ', Title: ' Ages ', width:120, align:center,dataalign:right},
{field: ' CreateDate ', title: ' Creation Date ', Width:120,align:center,dataalign:left},

Add the following code to onloadsuccess for each data column to re-

123456789101112131415161718

onLoadSuccess: function(data) {　　varfields=$("#tt").datagrid(‘getColumnFields‘,false);　　//获取数据表的每一行,注意如果不加.datagrid-view2限制,则含有行号表　　varbodyTts = $(".datagrid-view2 .datagrid-body table tr.datagrid-row");　　bodyTts.each(function(ii, objj) {　　　　//datagrid主体 table 的每一个tr 的td们　　　　varbodyTds = $(objj).children();　　　　bodyTds.each(function(i, obj) {　　　　　　//获取当前列的信息　　　　　　varcol = $("#tt").datagrid(‘getColumnOption‘,fields[i]);　　　　　　if(!col.hidden && !col.checkbox)　　　　　　{　　　　　　　　vardataalign=col.dataalign||col.align||‘left‘;　　　　　　　　$("div:first-child", obj).css("text-align", dataalign);　　　　　　}　　　　})　　})}

The disadvantage of this approach is that the data is generally large, so it takes more time to traverse the data

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

The second way, assume that the align in column is valid for the data, and add an additional headalign to set the header column alignment

{field: ' Name ', title: ' Names ', width:120, align:center,headalign:left},
{field: ' Age ', Title: ' Ages ', 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     //datagrid Head The TD of the first TR of table, that is, the set of columns 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]);         if (!col.hidden &&!col.checkbox) Each         {n-             var headalign=col.headalign| | col.align| | ' Left ';             $ ("Div:first-child", obj). css ("Text-align", headalign);         }15     }) 16}

In fact, the above two pieces of code can be seen, the second way of overhead is much smaller than the first, so the second kind of recommendation

The red #tt is the ID of my DataGrid, please change it to your own when you use it.

Both of the above methods are direct configuration + code mode

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

The third way is actually the second kind is just extension, easier to use.

 1/** 2 * Extended table column Alignment properties: 3 * Customizing a column field property: 4 * headalign: Original align property valid for data, headalign valid for column name 5 * 6 */7 $.ex  Tend ($.fn.datagrid.defaults,{8 onloadsuccess:function () {9 var target = $ (this);  Ten var opts = $.data (This, "DataGrid"). Options;  One-to-one var panel = $ (this). DataGrid ("Getpanel"); 12//Get the list of Var fields=$ (this). DataGrid (' Getcolumnfields ', false),//datagrid the first TR TD of the Head table, That is, the collection of columns var Headertds =panel.find (". Datagrid-view2. Datagrid-header. Datagrid-header-inner Table Tr:first-ch Ild "). Children (); 16//Reset the alignment of the list header Headertds.each (function (i, obj) {var col = Target.dat                 Agrid (' getcolumnoption ', fields[i]); if (!col.hidden &&!col.checkbox) 20 {21 var headalign=col.headalign| | col.align| | ' Left '; $ $ ("Div:first-child", obj). css ("Text-align", headalign); 23}24}) 25} 26   });

How to use:

Save as Jquery.easyui.datagrid2.js file, reference

Add <script src= "Jquery.easyui.datagrid2.js" type= "Text/javascript" ></script>

Add headalign Property

{field: ' Name ', title: ' Names ', width:120, Align:center,headalign: left}

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

Fourth Way, source modification, Ultimate Dafa

I use jquery easyui 1.2.4 Source ( unencrypted ) to illustrate, the other version should not be far from the difference

In fact, the main thing is text-align this attribute above

In the source search text-align, the No. 7929 line has the following code (in Buildgridheader method)

cell.css(‘text-align‘, (col.align || ‘left‘));

This is the way to modify the alignment of the header. The default is left, which means no setting, that is left

Obviously, or apply the second way, the column increases the Headalign property, and7929 rows are changed to

cell.css(‘text-align‘, (col.headalign||col.align||‘left‘));

And then, it's over, haha.

In fact, if you like dataalignfor data columns, 9496 rows also have Text-align (Renderrow method)

style += ‘text-align:‘+ (col.align || ‘left‘) + ‘;‘;

Can be used to equate the first way

style += ‘text-align:‘+ (col.dataalign||col.align||‘left‘) + ‘;‘;

If you like to toss the source code, please use the fourth kind, the simplest, haha

If you like clean source, and less configuration, less code, you can use the Third Way

If you like trouble, you can use the second or the first way

JQuery easyui DataGrid column name and data column set different alignment (GO)