Easyui Datagrid rownumbers行號四位、五位顯示不徹底的解決辦法

Easyui Datagrid rownumbers行號四位、五位顯示不徹底的解決辦法(引)

方法一:

相信不少人在使用easyui的時候都遇到過這個問題,當咱們設置成顯示Rownumber的時候,你會發現,若是Rownumber愈來愈大,達到三位數或者四位數的時候,Rownumber就顯示不全了.這個問題糾結了不知道多少人,在羣裏和論壇裏面都的都被問到無數次了. 之前也一直沒有太認真考慮過要解決這個問題,剛好最近有點時間,就研究了一下,其實要解決也很簡單,擴展一個方法就好了.

首先,從datagrid生成的代碼,咱們能夠發現,在rowNumber上都有特定的class標記,datagrid-cell-rownumber,datagrid-header-rownumber.既然有規則可循,那麼接下來的擴展就好辦了......

下面直接貼出方法的擴展代碼:

 1 $.extend($.fn.datagrid.methods, { 
 2     fixRownumber : function (jq) { 
 3         return jq.each(function () { 
 4             var panel = $(this).datagrid("getPanel"); 
 5             //獲取最後一行的number容器,並拷貝一份 
 6             var clone = $(".datagrid-cell-rownumber", panel).last().clone(); //因爲在某些瀏覽器裏面,是不支持獲取隱藏元素的寬度,因此取巧一下 
 7             clone.css({ 
 8                 "position" : "absolute", 
 9                 left : -1000 
10             }).appendTo("body"); 
11             var width = clone.width("auto").width(); 
12             //默認寬度是25,因此只有大於25的時候才進行fix 
13             if (width > 25) { 
14                 //多加5個像素,保持一點邊距 
15                 $(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).width(width + 5); 
16                 //修改了寬度以後,須要對容器進行從新計算,因此調用resize 
17                 $(this).datagrid("resize"); 
18                 //一些清理工做 
19                 clone.remove(); 
20                 clone = null; 
21             } else { 
22                 //還原成默認狀態 
23                 $(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).removeAttr("style"); 
24             } 
25         }); 
26     } 
27 }); 

有了方法,那要怎麼使用,在何時使用呢?答案是:onLoadSuccess事件,因此就有以下,

1 $("#easyui-datagrid").datagrid({ 
2     onLoadSuccess : function () { 
3         $(this).datagrid("fixRownumber"); 
4     } 
5 }); 

方法二:

修改easyui.css中的兩個值就能夠了。默認是25px

.datagrid-header-rownumber,.datagrid-cell-rownumber{
   width:40px;
  }

 

到此,就基本已經大功告成,你能夠試下效果了.....