JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)

需求如下

现有数据列三列

Name,Age,CreateDate

数据

张三,18,2000-12-09 :12:34:56

李四,28,2000-12-09 :12:34:56

王麻子,38,2000-12-09 :12:34:56

Jquery Easyui DataGrid中列设置

{ field: 'Name', title: '名称', width: 120 ,align:left},
{field: 'Age', title: '年龄', width: 120 ,align:right},
{ field: 'CreateDate', title: '创建日期', width: 120,align:center},

以上的align属性对列表名和数据都有效,就是列名和数据对齐方式是一样的,

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

要想不一样,必须能够单独设置列名或者数据行,对column增加一个字段,

第一种方式,假设align针对列名有效,可以增加一个dataalign针对数据列有效

{ field: 'Name', title: '名称', width: 120 ,align:center,dataalign:left},
{field: 'Age', title: '年龄', width: 120 ,align:center,dataalign:right},
{ field: 'CreateDate', title: '创建日期', width: 120,align:center,dataalign:left},

在onLoadSuccess添加如下代码,针对每个数据列重新

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

onLoadSuccess: function (data) { 　　var fields=$("#tt").datagrid('getColumnFields',false); 　　//获取数据表的每一行,注意如果不加.datagrid-view2限制,则含有行号表 　　var bodyTts = $(".datagrid-view2 .datagrid-body table tr.datagrid-row"); 　　bodyTts.each(function (ii, objj) { 　　　　//datagrid主体 table 的每一个tr 的td们 　　　　var bodyTds = $(objj).children(); 　　　　bodyTds.each(function (i, obj) { 　　　　　　//获取当前列的信息 　　　　　　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); 　　　　　　} 　　　　}) 　　}) }

这种方式的坏处在于数据一般很多,所以遍历这些数据需要花比较多时间

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

第二种方式,假设column里面的align是针对数据有效的,另外增加一个headalign来设置表头列对齐

{ field: 'Name', title: '名称', width: 120 ,align:center,headalign:left},
{field: 'Age', title: '年龄', width: 120 ,align:center,headalign:right},
{ field: 'CreateDate', title: '创建日期', width: 120,align:center,headalign:left},

 1 onLoadSuccess: function (data) {
 2     var fields=$("#tt").datagrid('getColumnFields',false);
 3     //datagrid头部 table 的第一个tr 的td们，即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     //重新设置列表头的对齐方式
 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 }

其实上述两段代码可以看出,第二种方式开销比第一种小很多,所以推荐第二种

红色的#tt是我datagrid的id,请用的时候改成你自己的

上述两种使用方法都是直接配置+代码方式

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

第三种方式其实就是第二种 只不过算是扩展,使用起来更简单

 1 /**
 2 * 扩展表格列对齐属性：
 3 *      自定义一个列字段属性：
 4 *      headalign ：原始align属性针对数据有效, headalign针对列名有效
 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         //获取列
13         var fields=$(this).datagrid('getColumnFields',false);
14         //datagrid头部 table 的第一个tr 的td们，即columns的集合
15         var headerTds =panel.find(".datagrid-view2 .datagrid-header .datagrid-header-inner table tr:first-child").children();
16         //重新设置列表头的对齐方式
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 });  

使用方法:

保存为jquery.easyui.datagrid2.js文件,引用

添加<script src="jquery.easyui.datagrid2.js" type="text/javascript"></script>

增加headalign属性

{ field: 'Name', title: '名称', width: 120 ,align:center,headalign:left}

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

第四种方式,源码修改,终极大法

我是用Jquery Easyui  1.2.4的源码(未经加密的)来说明的,其它版本大致应该不会相差很远

其实主要就是text-align这个属性上面

在源码搜索text-align,第7929行有如下代码(buildGridHeader方法内)

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

这句话就是修改列表头的对齐方式.默认是left,也就是说不用设置,就是left

很明显,还是套用第二种方式的,列增加headalign属性,7929行改成

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

然后,就结束了,哈哈

其实你要是喜欢针对数据列dataalign,9496行也有text-align(renderRow方法内)

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

可以用来等同第一种方式

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

如果你喜欢折腾源代码,请使用第四种,最简单,哈哈

如果你喜欢干净的源码,且配置少,代码少,可以用第三种方式

如果你喜欢麻烦,可以用第二或者第一种方式