JQuery EasyUI之DataGrid列名和數據列分別設置不同對齊方式

我使用的Jquery Easyui  1.2.6

需求如下

現有數據列三列

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添加如下代碼,針對每個數據列重新

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},

onLoadSuccess: function (data) {
    var fields=$("#tt").datagrid('getColumnFields',false);
    //datagrid頭部 table 的第一個tr 的td們，即columns的集合
    var panel = $("#tt").datagrid("getPanel");  
    var headerTds =panel.find(".datagrid-view2 .datagrid-header .datagrid-header-inner table tr:first-child").children();

    //重新設置列表頭的對齊方式
    headerTds.each(function (i, obj) {
        var col = $("#tt").datagrid('getColumnOption',fields[i]);
        if (!col.hidden && !col.checkbox)
        {
            var headalign=col.headalign||col.align||'left';
            $("div:first-child", obj).css("text-align", headalign);
        }
    })
}

 

其實上述兩段代碼可以看出,第二種方式開銷比第一種小很多,所以推薦第二種

 

紅色的#tt是我datagrid的id,請用的時候改成你自己的

上述兩種使用方法都是直接配置+代碼方式

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

第三種方式其實就是第二種 只不過算是擴展,使用起來更簡單

/** 
* 擴展表格列對齊屬性： 
*      自定義一個列字段屬性： 
*      headalign ：原始align屬性針對數據有效, headalign針對列名有效
*      
*/  
$.extend($.fn.datagrid.defaults,{  
    onLoadSuccess : function() {  
        var target = $(this);  
        var opts = $.data(this, "datagrid").options;  
        var panel = $(this).datagrid("getPanel");  
        //獲取列
        var fields=$(this).datagrid('getColumnFields',false);
        //datagrid頭部 table 的第一個tr 的td們，即columns的集合
        var headerTds =panel.find(".datagrid-view2 .datagrid-header .datagrid-header-inner table tr:first-child").children();
        //重新設置列表頭的對齊方式
        headerTds.each(function (i, obj) {
            var col = target.datagrid('getColumnOption',fields[i]);
            if (!col.hidden && !col.checkbox)
            {
                var headalign=col.headalign||col.align||'left';
                $("div:first-child", obj).css("text-align", headalign);
            }
        })
    }  
});  

使用方法:

保存為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') + ';';

如果你喜歡折騰源代碼,請使用第四種,最簡單,哈哈

如果你喜歡干凈的源碼,且配置少,代碼少,可以用第三種方式

如果你喜歡麻煩,可以用第二或者第一種方式

本文參考http://www.cnblogs.com/wujie6166/archive/2011/09/21/2184049.html的某些代碼.感謝原作者