Easyui Datagrid的Rownumber行號顯示問題

Datagrid中當你的行數據超過9999時，第一列的行號rownumber將會因為表格內容過長而導致無法顯示全部數字，
這一點Easyui無法做到自適應 所以需要進行修改，這里擴展一個方法就行了。

$.extend($.fn.datagrid.methods, {
    fixRownumber : function (jq) { return jq.each(function () { var panel = $(this).datagrid("getPanel"); //獲取最后一行的number容器,並拷貝一份 var clone = $(".datagrid-cell-rownumber", panel).last().clone(); //由於在某些瀏覽器里面,是不支持獲取隱藏元素的寬度,所以取巧一下 clone.css({ "position" : "absolute", left : -1000 }).appendTo("body"); var width = clone.width("auto").width(); //默認寬度是25,所以只有大於25的時候才進行fix if (width > 25) { //多加5個像素,保持一點邊距 $(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).width(width + 5); //修改了寬度之后,需要對容器進行重新計算,所以調用resize $(this).datagrid("resize"); //一些清理工作 clone.remove(); clone = null; } else { //還原成默認狀態 $(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).removeAttr("style"); } }); } });

將上述代碼添加到easyui源碼當中即可

然后在你的$(“#dg”).datagrid()中添加onLoadSuccess事件

$("#dg").datagrid({ onLoadSuccess : function () { $(this).datagrid("fixRownumber"); } });