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


相关推荐

  • jquery事件delegate()方法用法详解[通俗易懂]

    jquery事件delegate()方法用法详解[通俗易懂]我们先看官方是怎么说delegate()方法,delegate()方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数,使用delegate()方

    2022年7月2日
    25
  • hibernate作用_json.parsearray(string,class)

    hibernate作用_json.parsearray(string,class)Hibernate的query.uniqueResult();转换异常

    2022年9月30日
    3
  • 零基础学Java(3)运算符

    零基础学Java(3)运算符运算符运算符用于连接值。Java提供了一组丰富的算术和逻辑运算符以及数学函数。算术运算符在Java中,使用算术运算符+、-、*、/表示加、减、乘、除运算。当参与/运算的两个操作数都是整数时,表示

    2022年7月31日
    7
  • VS2013 下载地址

    VS2013 下载地址VS2013下载链接http://download.microsoft.com/download/8/1/F/81FE1D40-2658-4CC5-8699-85D8377B35B9/vs2013.4_ult_chs.iso

    2025年10月24日
    3
  • Stimulsoft 仪表板.JS 2022.2.1

    Stimulsoft 仪表板.JS 2022.2.1Stimulsoft仪表板.JS2022.2.1  二维码视觉设计-使用组件编辑器中的属性定义各种图形元素的颜色和形状。  仪表板的新交互式按钮组件-允许您使用脚本平台语言或Blockly执行脚本。它包括几个可视化设置,这些设置取决于按钮的状态。  仪表板的新卡片组件-此分析组件允许您将数据分组、处理和显示为仪表板中的卡片。它支持所有类型的图形表示,包括集群列、色标、指标、气泡和迷你图。它能够显示文本、数值和图像。  仪表板的新图形堆叠图表类型-此图表用于显示值在整体指标中的

    2022年7月26日
    6
  • 订单支付页面 html,订单支付完成.html「建议收藏」

    订单支付页面 html,订单支付完成.html「建议收藏」订单支付完成$axure.utils.getTransparentGifPath=function(){return’resources/images/transparent.gif’;};$axure.utils.getOtherPath=function(){return’resources/Other.html’;};$axure.utils.getReloadPa…

    2022年6月6日
    219

发表回复

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

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