zoukankan      html  css  js  c++  java
  • 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");
                }
            });
        }
    });[/code]
    
    

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

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

    $("#dg").datagrid({
        onLoadSuccess : function () {
            $(this).datagrid("fixRownumber");
        }
    });[/code]
  • 相关阅读:
    野生前端的数据结构基础练习(3)——链表
    野生前端的数据结构基础练习(3)——链表
    野生前端的数据结构基础练习(3)——链表
    Spring MVC之LocaleResolver详解
    Winfrom 屏蔽Alt+F4
    最简单的单例模式
    Eclipse的优化
    Eclipse的优化
    用PULL解析器解析XML文件
    用PULL解析器解析XML文件
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13317774.html
Copyright © 2011-2022 走看看