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)
上一篇 2022年6月12日 下午5:00
下一篇 2022年6月12日 下午5:00


相关推荐

  • DirBuster使用介绍

    DirBuster使用介绍最近在做和华为合作的项目 由于华为对安全层面要求比较高 要求对敏感接口进行遍历 查看业务系统是否存在对外开放的敏感接口或者对接口进行权限控制 以及对目录列表进行测试确保所有的目录访问均不能打印文件列表 要求用 DirBuster 渗透工具 以此做个记录 工具介绍 DirBuster 是一个多线程的基于 Java 的应用程序设计用于暴力激活成功教程 Web 应用服务器上的目录名和文件名的工具 主要用来探测 web 目录结构和隐藏文件 扫描 Web 目录 可以发现潜在的渗透目标 不同于网站爬虫 使用字典方式可以发现网站没有关联的网

    2026年3月20日
    2
  • HTML5+开发移动app教程1-环境搭建「建议收藏」

    HTML5+开发移动app教程1-环境搭建「建议收藏」前言本教程是介绍使用html5+(nativejs)和mui开发移动app(包括android和ios),感兴趣请继续,不感兴趣请跳过,大部分来自官方api,增加了一些自己的总结。HBuilder说明用h5+开发app的环境,也是ide,对eclipse做了深度定制,以前使用过eclipse或者myeclipse可以直接上手官网http://www.dclo

    2022年5月31日
    36
  • VMware虚拟机 之 VMX进程已提前退出

    VMware虚拟机 之 VMX进程已提前退出前言由于我在使用 VMware 虚拟机时 时常出现故障 现将故障之一 vmx 进程已提前退出 的处理方法记录一下 故障描述在使用虚拟机时 由于不正常的退出或强制退出 导致虚拟机关闭 但是进程内的 vmx exe 还没有关闭 问题提示框如下 解决方法在说我的解决方法之前 请允许我总结一下我实验过的方法 Ctrl Atl delete 打开任务管理器 找到 vmware vmx exe 进

    2026年3月16日
    2
  • 《Android应用开发揭秘》连载1[通俗易懂]

    《Android应用开发揭秘》连载1[通俗易懂]《Android应用开发揭秘》  书名:Android应用开发揭秘作者:杨丰盛出版社:机械工业出版社ISBN:9787111291954出版日期:2010年3月(1版2次)开本:16页码:515版次:1-2定价:69元豆瓣网讨论地址:http://www.douban.com/subject/4200822/China-pub预订地址:http://www.china-pu

    2022年5月5日
    69
  • stap监控cpu脚本小结

    stap监控cpu脚本小结cpu 相关 probecpu 返回当前 CPUnumbersch cpu off 进程在 cpu 上停止执行时调用 task prev 即将离开的进程 task next 即将执行的进程 namep

    2026年3月17日
    2
  • StarUML使用教程-指导手册

    StarUML使用教程-指导手册StarUML 使用说明 指导手册原著 StephenWong nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp 翻译 火猴 1 综述 StarUML 是一种生成类图和其他类型的统一建模语言 UML 图表的工具 这是一个用 Java 语言描述的创建类图的简明手册 StarUML 简称 SU 是一种创建 UML 类图 并能够自动生成 Java 的 stubcode nbsp 的工具 SU 也可以做 JAVA 逆向工程 以产生相应的 UML 图表 在本教程中 我

    2026年3月16日
    2

发表回复

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

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