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


相关推荐

  • pycharm2.5 永久激活码破解方法

    pycharm2.5 永久激活码破解方法,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月15日
    126
  • RocketMQ的长轮询消费方式

    RocketMQ的长轮询消费方式1.Push推送方式(即Server端推送消息给client):当Server收到消息发送者发送过来的消息后,Server端主动把消息推送给client,这个方式实时性比较好,但是增加了Server的工作负担,对Server的性能造成影响;另外Client如果不能够及时处理Server推送的消息,也是很大的问题。2.Pull拉取方式(即Client从Server拉取消息):Client…

    2022年6月24日
    34
  • 差模信号和共模信号彻底理解_形容理解的不全面

    差模信号和共模信号彻底理解_形容理解的不全面前言AOP英文名为AspectOrientedProgramming,意为面向切面编程,通过预编译方式和运行期间动态代理实现程序功能统一维护的一种技术。AOP是OOP的延续,是Spring框架中的一个重要内容,利用AOP可以对业务逻辑的各个部分进行隔离,从而使得业务逻辑各部分之间的耦合度降低,提高程序的可重用性,同时提高了开发的效率。通过以上定义似乎还是不能理解AOP到底是什么,下面通过一个现实中的实例来说明。先看一下传统程序的流程,比如银行系统会有一个取款流程我们可以把方框里的流程

    2022年8月11日
    5
  • 几种页面跳转方法_HTML页面跳转的方法

    几种页面跳转方法_HTML页面跳转的方法页面跳转方式1——herf在一些html的文档中,用herf实现页面跳转的比较常见,也很好用。页面跳转方式2——利用表单action页面跳转方式3——response.sendRedirect(

    2022年8月5日
    22
  • 最经典的黑客入门教程[通俗易懂]

    最经典的黑客入门教程[通俗易懂]第一节、黑客的种类和行为以我的理解,“黑客”大体上应该分为“正”、“邪”两类,正派黑客依靠自己掌握的知识帮助系统管理员找出系统中的漏洞并加以完善,而邪派黑客则是通过各种黑客技能对系统进行攻击、入侵或者做其他一些有害于网络的事情,因为邪派黑客所从事的事情违背了《黑客守则》,所以他们真正的名字叫“骇客”(Cracker)而非“黑客”(Hacker),也就是我们平时经常听说的“黑客”(Cacker)和“红客”(Hacker)。无论那类黑客,他们最初的学习内容都将是本部分所涉及的内容,而且掌握的基本技能也都是.

    2022年6月7日
    32
  • Getting Started with Amazon EC2 (1 year free AWS VPS web hosting)[通俗易懂]

    Getting Started with Amazon EC2 (1 year free AWS VPS web hosting)[通俗易懂]from:http://blog.coolaj86.com/articles/getting-started-with-amazon-ec2-1-year-free-aws-vps-web-hosting.htmlAmazonWebServicesGoogle”AmazonWebServiceFreeTier”http://aws.amazon.com/…

    2022年10月8日
    0

发表回复

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

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