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 ...
随机推荐
- 我的自动化测试历程(Selenium+TestNG+Java+ReportNG+Jenkins)
原地址:http://blog.csdn.net/shilinjie_8952/article/details/53380373?locationNum=11&fps=1 测试环境:Java+ ...
- Node.js 向一个文件添加内容
最简方案: fs.appendFile('message.txt', 'data to append', function (err) { }); 参考文档: http://www.codeweblo ...
- JavaScript的String对象
1.创建String对象 Html标签的格式编排方法:可以将String对象的字符串内容输出成对应的html标签. 示例: var str = "JavaScript程序设计"; ...
- 超棒的JS移动设备滑动内容幻灯实现 - Swiper
来源:GBin1.com 在线演示 如果你需要一款帮助你实现手机或者移动设备上内容幻灯实现的JS类库的话 , Swiper是一个不错的选择,它不依赖于任何第三方的类库.因此体积非常小,适合运行在移动设 ...
- php stripslashes和addslashes的区别
我们在向mysql写入数据时,比如: mysql_query("update table set `title`='kuhanzhu's blog'"); 那就会出错.同asp时一 ...
- 算法笔记_104:蓝桥杯练习 算法提高 新建Microsoft Word文档(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 L正在出题,新建了一个word文档,想不好取什么名字,身旁一人惊问:“你出的题目叫<新建Microsoft Word文档>吗? ...
- [C/C++]关于C++11中的std::move和std::forward
http://www.cnblogs.com/cbscan/archive/2012/01/10/2318482.html http://blog.csdn.net/fcryuuhou/article ...
- UIKit class hierarchy
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY3puY2Rtcw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- LoadRunner访问Mysql数据库(转)
这是很久以前编写的一个测试案例,那时是为了检查大量往Mysql数据库里插入数据,看一下数据库的性能如何?服务器是否会很快就被写满了. 前期的准备工作:Mysql 数据库搭建,LoadRunner,li ...
- 准备你的Adempiere开发环境(1)- 编译
1. 安装JDK 1.6. 2. 安装Eclipse IDE for Java EE Developers. 3. 导入adempire-360lts: 4. 关闭adempiere-360lts的B ...