Easyui Datagrid的Rownumber行号显示问题

- 日理万妓 2022-08-05 12:12 178阅读 0赞

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");
        }
    });

作者：[itmyhome][]

[itmyhome]: http://blog.csdn.net/itmyhome1990