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)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • 如何在vue组件中引入外部的css和js文件[通俗易懂]

    如何在vue组件中引入外部的css和js文件[通俗易懂]在使用vue框架开发时,我们都知道一个组件中可以同时写HTML、css、js代码,只需三个标签而已,如下:但是要真把所有的代码都写入一个组件文件当中,那么代码量是非常大的,极不便于修改和维护,这时就需要把css样式和js代码写到其他文件下,再引入组件当中。具体方法如下:在组件中引入css文件:<style>@importurl(css文件路径)</style>在组件中引入js文件:首先需要将我们…

    2022年10月8日
  • h5电商模板_网站模板

    h5电商模板_网站模板[HTML+CSS]电商网站模板b站白嫖的网课,黑马的小兔鲜儿案例,教程链接点这里就行成品文件目录结构CSSbase.css:基本样式,内外边距,字体之类的common.css:网页的公共样式,一般是header部分和footer部分index.css:首页样式imageslogo.png:网站logosprites.png:拿来存精灵图的、uploads以图片为主,主要存放需要经常更新的资源例如商品图片,活动图片等favicon.ico网站图标index.

    2022年10月1日
  • sm羞耻任务_羞耻驱动的发展

    sm羞耻任务_羞耻驱动的发展sm羞耻任务我一直渴望写出精巧的代码。在完成所有生产代码配对的日常工作中,我认为我们的质量很高。但是令人惊讶的是,当您独自编码时,您多么容易原谅自己并陷入不良习惯。配对时羞耻是品质背后的动力吗?我们有许多使用EasyMock编写的古老的单元测试;我们所有最近的单元测试都使用JMock。这笔小小的技术债务意味着,如果您要更改仅适用于EasyMock测试的代码,则首先必须决…

    2022年9月15日
  • 可以外链的网络相册

    可以外链的网络相册1.Yupoo简介:Yupoo已非早前的Yupoo,现在已经开始商业起来,免费账户的外链图片会被打上水印,月上传的流量为61M,外链流量为500M,通过博客认证后外链流量为1G。关于VIP的详细数据如下:http://www.yupoo.com/payment/introduce 总的来说现在的每年30元的VIP账户就是以前的免费账户。重要一点是月外链流量大于30G时即便你购买的是18…

    2022年6月29日
  • ORACLE RAC--裸设备的创建配置

    ORACLE RAC--裸设备的创建配置

    2022年3月11日
  • LAMP下HTTPS配置「建议收藏」

    LAMP下HTTPS配置「建议收藏」LAMP下HTTPS配置    LAMP下配置HTTPS非常简单,本文主要介绍ubuntu下apache配置https的具体步骤和流程,证书为服务器生成的本地证书,希望对大家有所帮助。证书:本地生成apache版本:Apache/2.4.7(Ubuntu)系统:Ubuntu14.04一、安装Apache$sudoapt-getinstallapache2使用此方式安装的APACHE,配置比…

    2022年6月5日

发表回复

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

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