Easyui Datagrid的Rownumber行号显示问题

Posted skiwnchqhh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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");
            }
        });
    }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

将上述代码添加到easyui源码当中即可

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

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

作者:itmyhome

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow


以上是关于Easyui Datagrid的Rownumber行号显示问题的主要内容,如果未能解决你的问题,请参考以下文章

easyui datagrid设置rownumber行号显示NaN怎么回事

easyui datagrid页面序号框怎么变宽

雷林鹏分享:jQuery EasyUI 应用 - 创建 CRUD 数据网格(DataGrid)

datagrid 使用

关于easyui加载datagrid数据的问题

jQuery easyUI easyui-datagrid 选中指定内容的行