Easyui Datagrid的Rownumber行号显示问题
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");
}
});
Easyui Datagrid的Rownumber行号显示问题的更多相关文章
- SyntaxHighlighter行号显示错误问题解决方案
SyntaxHighlighter是根据代码中的换行符分配行号的.但是,如果一行代码或者注释比较长,在页面显示时需要分成多行显示,会出现行号对不上的问题,像这样: 通过设置CSS强制不换行,可以保证行 ...
- xshell行号显示
xshell显示行号: 输入命令: vim ~/.vimrc 输入: set nu 之后在打开文件 就可以 看到行号显示.
- datagrid rownumber行号与数据行显示错位的解决办法
最近在使用datagrid控件,遇到问题多多. 其中一个就是datagrid在使用行编号的情况下,行编号与数据行出现错位的情况,如图:
- easyui datagrid中datetime字段的显示和增删改查问题
datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借 ...
- 实现easyui datagrid在没有数据时显示相关提示内容
本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...
- 解决代码着色组件SyntaxHighlighter行号显示问题
SyntaxHighlighter是根据代码中的换行符分配行号的.但是,如果一行代码或者注释比较长,在页面显示时需要分成多行显示,这时行号就对不上了.如下图: 通过下面的css强制不换行,可以避开这个 ...
- vs2010设置 "行号显示"
Microsoft Visual Studio 2010 默认情况下是不显示代码的行号的.在编译出错时,可点击下面输出窗口中的错误提示进行定位. 但是这样操作起来你有没有感觉到不方便呢. 不显示行号时 ...
- DevExpress控件使用经验总结- GridView列表行号显示操作
DevExpress是一个比较有名的界面控件套件,提供了一系列的界面控件套件的DotNet界面控件.本文主要介绍我在使用DevExpress控件过程中,遇到或者发现的一些问题解决方案,或者也可以所示一 ...
- myeclipse2014鼠标单击后光标位置背景底色为白色太难看,行号显示
Java文件的修改方法: window--Preferences--Java--Editor--Mark Occurences JS文件中点击字符串就会变成白色背景 JS文件字体颜色的修改 windo ...
随机推荐
- 程序的入口及AppDelegate窗体显示原理
AppDelegate.m - (void)dealloc { [_window release]; [super dealloc]; } - (BOOL)application:(UIApplica ...
- Java线程详细监控和其dump的分析使用—-分析Java性能瓶颈
转载:https://www.cnblogs.com/firstdream/p/8109352.html 这里对linux下.sun(oracle) JDK的线程资源占用问题的查找步骤做一个小结: l ...
- JList的基本操作
1.初始化并添加元素DefaultListModel leftListModel=new DefaultListModel();String[] items = Model.getPairs();fo ...
- css新单位 vw , vh
考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整.但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单 ...
- 1、jQuery概述
JQuery基本功能 ① 访问和操作Dom元素 ② 控制页面样式 ③ 对页面事件的处理 ④ 大量插件在页面中的运用 ⑤ 与Ajax技术的完美结合 $(document).ready ...
- 为何 IntelliJ IDEA 比 Eclipse 更好
http://www.oschina.net/news/26929/why-intellij-is-better-than-eclipse圣战 有一些没有唯一正确答案的“永恒”的问题,例如哪个更好:是 ...
- 检查linux网络的状况
http://hi.baidu.com/dr_wang/blog/item/2952f7458659c306cefca3cc.html
- C# 使用TASK处理多任务同时处理
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- express 创建node服务器
var express = require('express'); var app = new express(); app.listen(3000); app.get('/',function(re ...
- List与String的相互转换
List转字符串,用逗号隔开 List<string> list = new List<string>(); list.Add("a"); list.Add ...