zoukankan      html  css  js  c++  java
  • Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法

    Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法(引)

    方法一:

    相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你会发现,如果Rownumber越来越大,达到三位数或者四位数的时候,Rownumber就显示不全了.这个问题纠结了不知道多少人,在群里和论坛里面都的都被问到无数次了. 以前也一直没有太认真考虑过要解决这个问题,恰好最近有点时间,就研究了一下,其实要解决也很简单,扩展一个方法就行了.

    首先,从datagrid生成的代码,我们可以发现,在rowNumber上都有特定的class标记,datagrid-cell-rownumber,datagrid-header-rownumber.既然有规则可循,那么接下来的扩展就好办了......

    下面直接贴出方法的扩展代码:

     1 $.extend($.fn.datagrid.methods, { 
     2     fixRownumber : function (jq) { 
     3         return jq.each(function () { 
     4             var panel = $(this).datagrid("getPanel"); 
     5             //获取最后一行的number容器,并拷贝一份 
     6             var clone = $(".datagrid-cell-rownumber", panel).last().clone(); //由于在某些浏览器里面,是不支持获取隐藏元素的宽度,所以取巧一下 
     7             clone.css({ 
     8                 "position" : "absolute", 
     9                 left : -1000 
    10             }).appendTo("body"); 
    11             var width = clone.width("auto").width(); 
    12             //默认宽度是25,所以只有大于25的时候才进行fix 
    13             if (width > 25) { 
    14                 //多加5个像素,保持一点边距 
    15                 $(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).width(width + 5); 
    16                 //修改了宽度之后,需要对容器进行重新计算,所以调用resize 
    17                 $(this).datagrid("resize"); 
    18                 //一些清理工作 
    19                 clone.remove(); 
    20                 clone = null; 
    21             } else { 
    22                 //还原成默认状态 
    23                 $(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).removeAttr("style"); 
    24             } 
    25         }); 
    26     } 
    27 }); 

    有了方法,那要怎么使用,在什么时候使用呢?答案是:onLoadSuccess事件,所以就有如下,

    1 $("#easyui-datagrid").datagrid({ 
    2     onLoadSuccess : function () { 
    3         $(this).datagrid("fixRownumber"); 
    4     } 
    5 }); 

    方法二:

    修改easyui.css中的两个值就可以了。默认是25px

    .datagrid-header-rownumber,.datagrid-cell-rownumber{
       width:40px;
      }

    到此,就基本已经大功告成,你可以试下效果了.....

  • 相关阅读:
    几种 JavaScript 动画库推荐
    微软工程师为你推荐了十本程序员必读书目
    前端新老手必备的34种JavaScript简写优化技术
    Airbnb 爱彼迎 visx 项目介绍
    开源中间件技术支持(5000+元/天)
    C# Byte数组与Int16数组之间的转换(转)
    【636】K.sum 与 np.sum 的区别
    【635】语义分割 label 通道与模型输出通道的
    【634】ndarray 提取行列进行任意变换 & 相关 ndarray 操作
    面试官:设计一个安全的登录都要考虑哪些?我一脸懵逼。。
  • 原文地址:https://www.cnblogs.com/sgivee/p/4837082.html
Copyright © 2011-2022 走看看