jqGrid启用列冻结之后列高度不一致问题解决办法-阿里云开发者社区

开发者社区> 咖啡兔子> 正文

jqGrid启用列冻结之后列高度不一致问题解决办法

简介:
+关注继续查看

1.喜欢又憎恨的列冻结功能

jqGrid 4.3.0版本发布中包含了一个我期待已久的功能——列冻结。和Excel中的冻结效果一样,把需要一直显示的列固定显示,其他辅助的列横向滚动显示,可以参考jqGrid的列冻结演示:http://trirand.com/blog/jqgrid/jqgrid.html,打开页面之后选择”Frozen Cols.Group Header(new)”的“Frozen column”。

下图是正常情况:

jqGrid列冻结高度一致的情况

但是,事情总是那么的不顺利……

jqGrid启用列冻结之后列高度不一致

从图中可以看出列:[Inv No,Date]是冻结的列,后面的是未冻结的列;未冻结的”Note“列内容太多导致分两行显示,问题就处在红色边框区域内,高度不一致。

2.解决办法

目前官方还没有发布解决办法,所以我先用hack的方式临时解决这个问题。对于高度不同又分为两种情况:冻结的列比未冻结的高,未冻结的列比冻结的高。

我专为此写了一个页面演示这种问题:

http://www.kafeitu.me/demo/jqgrid/frozen.html

读者打开演示页面之后点击按钮即可修复此问题,右键查看源码看我如何hack!!!

2.1 未冻结的列比冻结的列高度高

此种情况要读取未冻结列的高度,然后设置到冻结列的style中,但是不能用height()设置必须使用height: 20px !important方式,其中!important必须有,代码参考#32行处。

除了设置高度之外还需要根据浏览器的不同设置一个过渡值,见代码清单22~29行处。

问题请参考演示的第一个例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
 * 终极hack列冻结导致的高度问题
 * @param  {[String]} listId [列表ID]
 */
function hackHeight(listId) {
    $(listId + '_frozen tr').slice(1).each(function() {
 
        var rowId = $(this).attr('id');
 
        var frozenTdHeight = parseFloat($('td:first', this).height());
        var normalHeight = parseFloat($(listId + ' #' + $(this).attr('id')).find('td:first').height());
 
        // 如果冻结的列高度小于未冻结列的高度则hack之
        if (frozenTdHeight < normalHeight) {
 
            $('td', this).each(function() {
 
                /*
                 浏览器差异高度hack
                 */
                var space = 0; // opera默认使用0就可以
                if (browser.isChrome()) {
                    space = 0.6;
                } else if (browser.isIE()) {
                    space = -0.2;
                } else if (browser.isMozila()) {
                    space = 0.5;
                }
 
                if (!$(this).attr('style') || $(this).attr('style').indexOf('height:') == -1) {
                    $(this).attr('style', $(this).attr('style') + ";height:" + (normalHeight + space) + "px !important");
                }
            });
        }
    });
}

2.2 冻结的列比未冻结的列高度高

jqGrid启用列冻结之后列高度不一致

这种情况和第一种不同,高度是一致了,但是冻结列的整个div下移了1个像素(opera浏览器除外),所以解决办法就是把列冻结的div上移1个像素。

从上图中可以看出明显错位了,问题请参考演示的第二个例子。

代码清单中的12~14处用于上移表头的top;代码清单15~17处用于上移数据table的top。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#hackFrozenHeight1').click(function() {
    var listId = 'list1';
    var divTop = -1;
    var bdivTop = -1;
 
    // opera 不需要hack
    if (browser.isOpera()) {
        divTop = 0;
        bdivTop = 0;
    }
 
    $('#gview_' + listId + ' .frozen-div').css({
        top: $('#gview_' + listId + ' .frozen-div').position().top + divTop
    });
    $('#gview_' + listId + ' .frozen-bdiv').css({
        top: $('#gview_' + listId + ' .frozen-bdiv').position().top + bdivTop
    });
});

3.结束语

已经报告次问题,希望官网能尽快解决次问题。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
解决DataGridView在多线程中无法显示滚动条的问题
原文: 解决DataGridView在多线程中无法显示滚动条的问题 在多线程中对DataGridView指定 DataSource 来填充数据,更新数据的时候,会导致DataGridView出现假死,显示错误或者滚动条无法显示的问题,在保证了DataGr...
879 0
IntelliJ IDEA常见问题解决办法汇总
IntelliJ IDEA常见问题解决办法汇总
765 0
UpdatePanel中GridView的分页问题
项目中在UpdatePanel范围内加入了一个GridView控件。如果此页面初始化有数据时,分页效果一切正常。但是当初始化时没有数据,页面中点击按钮加载数据后,再点分页数字时报异常:“Microsoft JScript 运行时错误: 缺少对象”经多方请教,几经周折后,终于搞定这个问题。
773 0
Manage Jenkins管理界面提示“依赖错误: 部分插件由于缺少依赖无法加载...“问题解决办法
Manage Jenkins管理界面提示“依赖错误: 部分插件由于缺少依赖无法加载...“问题解决办法
9 0
一个内存增长问题的分析和处理(二)——valgrind工具的用法
valgrind是linux下对C++和C程序进行内存泄露检测的工具,除了内存检测,valgrind还提供了很多其他的功能,这里主要介绍下valgrind的内存检测的功能。   首先是文件的下载,valgrind的官方网址是http://valgrind.org/,最新版本的valgrind是3.9,下载地址如下:http://valgrind.org/downloads/。
773 0
明日直播预告:触摸新一代问题娱乐
文娱视频技术、5G构建的新消费体验
164 0
手动绑定SQLDataSource到GridView后分页的问题(转)
由于GridView的数据源是后台CS文件中代码绑定的。所以程序运行时,点击分页数后没有反应。解决办法如下: using System;using System.Data;using System.Configuration;using System.
681 0
Jenkins 管理界面里提示“反向代理设置有误“的问题解决办法
Jenkins 管理界面里提示“反向代理设置有误“的问题解决办法
8 0
+关注
19
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载