美文网首页
Easyui Datagrid的Rownumber行号超出4位数

Easyui Datagrid的Rownumber行号超出4位数

作者: 小龙虾Julian | 来源:发表于2017-11-10 11:05 被阅读0次
背景:在做某项目时,在操作日志模块遇到了这样的问题,当日志数超过1000(四位数)条时datagrid的行号不能显示完全,后半部分被遮住了。
描述:easyui本身不能实现行号宽度自适应,此时需要进行扩展
解决方法:

(1)在jquery.easyui.min.js中添加如下代码:

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

(2)$(“#dataList”).datagrid()中添加onLoadSuccess事件

$("#dataList").datagrid({
    onLoadSuccess : function () {
        $(this).datagrid("fixRownumber");
    }
});
注意:

(1)当onLoadSuccess 函数中有其他涉及表格重绘(宽度/高度)的代码时,$(this).datagrid("fixRownumber");这句代码要放在最前面;
(2)网上提供的方法中包含这句代码:var width = clone.width("auto").width(); 经过测试是有问题的(当把数据反倒最后一页时再缩小页数时序号列和复选框列会出现空白),所以这句代码要改成var width = clone.width();

相关文章

网友评论

      本文标题:Easyui Datagrid的Rownumber行号超出4位数

      本文链接:https://www.haomeiwen.com/subject/zffbmxtx.html