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

123456789101112131415161718

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‘) + ‘;‘;

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

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

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

JQuery EasyUI之DataGrid列名和資料列分別設定不同對齊(轉)