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 ...
随机推荐
- 小程序数组合并concat
arr1=arr1.concat(arr2) 文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有问题一起学习欢迎留言.评论.
- 【Python3 爬虫】17_爬取天气信息
需求说明 到网站http://lishi.tianqi.com/kunming/201802.html可以看到昆明2018年2月份的天气信息,然后将数据存储到数据库. 实现代码 #-*-coding: ...
- android 模拟器上传文件 Read-only file system
在cmd窗口一条命令就可以了:adb shellmount -o remount rw /
- Android Unique Device ID
There are several occasions when the unique identifier of a device is required. For instance you nee ...
- 将本地web项目发布到ubuntu上并运行 第一个本地的.net core2.0项目
前置条件 ubuntu已安装dotnet 发布版本dotnet与发布机一致 这里用的是vm 所以直接把本地web项目拷贝到vm中运行的ubuntu系统中 web站点需要将 webapplication ...
- python selenium --frame
本节知识点: 多层框架或窗口的定位: switch_to_frame() switch_to_window() 智能等待: implicitly_wait() 对于一个现代的web应用,经常会出现框架 ...
- sass 的学习
导入scss @import "../../sass/variables.scss"; @import "../../sass/helper.scss"; @m ...
- ubuntu系统安装nginx出现的错误(依赖环境没有安装完)
报错信息: error: the HTTP image filter module requires the GD library. 编译参数:(或源安装) ./configure --prefix= ...
- Xml+Xslt测试工具
下载地址:http://download.csdn.net/detail/a497785609/5791359 说明:下载后,修改下Xslt部分的头部:<xsl:stylesheet versi ...
- Spring Boot(四):利用devtools实现热部署,改动代码自动生效
一.前言 spring-boot-devtools是一个为开发者服务的一个模块,其中最重要的功能就是自动应用代码更改到最新的App上面去.原理是在发现代码有更改之后,重新启动应用,但是速度比手动停止后 ...