Easyui Datagrid的Rownumber行号显示问题

Easyui Datagrid的Rownumber行号显示问题在Oracle中使用orderby进行查询排序时,如果排序字段中有空值(null),排序结果可能会达不到我们想要的结果。如:select*fromtestorderbyagedesc;按照age字段降序排序,结果如下:将sql语句改为select*fromtestorderbyagedescnullslast;即可将null值排到

大家好,又见面了,我是你们的朋友全栈君。

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/131269.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • sublime 4113 激活码【最新永久激活】

    (sublime 4113 激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html0UY7RF7AC5-eyJsaWNlbnNlSWQi…

    2022年3月28日
    401
  • 常见的数据分析图表[通俗易懂]

    常见的数据分析图表[通俗易懂]常见的数据分析图表

    2022年5月3日
    151
  • 51单片机 堆栈与堆栈指针[通俗易懂]

    51单片机 堆栈与堆栈指针[通俗易懂]   堆栈是一种执行“先入后出”算法的数据结构。是在内存中的一个存储区域,数据一个一个顺序地存入(也就是“压入—PUSH”)这个区域之中。       有一个地址指针(堆栈指针)总指向最后一个压入堆栈的数据所在的存储单元,存放这个地址指针的寄存器就叫做堆栈指示器。       开始放入数据的单元叫做“栈底”。数据一个一个地存入,这个过程叫做“压栈”。读取这些数据时,按照堆栈指示器中…

    2025年8月18日
    3
  • QTreeView使用总结1,一个简单示例

    QTreeView使用总结1,一个简单示例1,简介本文为一个最简单的QTreeView初始化过程的示例。除去了一切操作响应等细节,只是展示使QTreeView显示出带层次结构的数据,至少需要哪些代码。只附带了一点点常用设置项。2,效果3,代码一个QTreeView插入三层数据的最简单代码示例:voidMainWindow::InitTree(){//1,构造Model,这里示例具有3层关系的model构造过程QSt…

    2022年6月13日
    54
  • Acquia Drupal「建议收藏」

    Acquia Drupal「建议收藏」Acquia是一家有Drupal创建者Dries成立的一家公司,Acquia Drupal是一款商业软件,有些部分非开源的。Drupal与Acquia Drupal的关系就像Eclilpse和Myeclipse的关系一样。AcquiaDrupalforWindows的安装需要通过微软的WebMatrix进行安装。通过WebMatrix可以利用CMS快速创建网站。http

    2022年5月10日
    35
  • Docker安装Nexus3私服以及使用

    Docker安装Nexus3私服以及使用一、Nexus简介二、安装步骤(使用docker)1、搜索Nexus3镜像dockersearchnexus​2、拉取Nexus3镜像dockerpullsonatype/nexus3​3、创建Nexus3容器dockerrun-itd-p8081:8081–privileged=true–namenexus3\-v/data/nexus-data:/var/nexus-data–restar…

    2022年7月13日
    11

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号