为什么Jqgrid冻结列似乎不适用于过滤器行和过滤器标题? [英] why doesn't Jqgrid frozen column seem to work with filter rows and filter heading?

问题描述

我无法使冻结列与jqgrid(4.3.0)一起使用.我唯一能想到的就是我有一些特殊的东西不是开箱即用的:

i can't get frozen columns to work with jqgrid (4.3.0). the only thing i can think of is that i have some specific things that are not out of the box:

1. 我在顶部使用过滤的行.
2. 我正在使用(cloneToTop:true)在网格顶部显示所有按钮

3. 我有以下代码，用于在jqggrid的顶部显示过滤器状态. (使用filtertoolbar)

1. I am using filtered row at the top.
2. I am showing all buttons at the top of the grid using (cloneToTop: true)

3. I have the following code that i use to show filter status at the top of jqggrid. (using filtertoolbar)

loadComplete: function () {

    var postData = jQuery(gridSelector).getGridParam("postData");
    var newCapture = "";
    if (postData._search === true && typeof postData.filters !== "undefined") {
        var filters = jQuery.parseJSON(postData.filters);
        newCapture = "Filter: [";
        var rules = filters.rules;
        for (var i = 0; i < rules.length; i++) {
            var rule = rules[i];
            var op = rule.op;  // the code name of the operation
            if (jQuery.fn.searchFilter && jQuery.fn.searchFilter.defaults &&
            jQuery.fn.searchFilter.defaults.operators) {
                // find op description 
                var operators = jQuery.fn.searchFilter.defaults.operators;
                for (var j = 0; j < operators.length; j++) {
                    if (operators[j].op === rule.op) {
                        op = operators[j].text;
                        //op = $.jgrid.search.odata[j];
                        break;
                    }
                }
            }
            newCapture += rule.field + " " + op + " '" + rule.data + "'";
            if (i + 1 !== rules.length)
                newCapture += ", ";
        }
        newCapture += "]";
    }
    jQuery(gridSelector).setCaption(newCapture);

谁能想到在这种情况下会阻止冻结色谱柱工作的任何事情.

can anyone think of anything that would prevent frozen columns from working under these circumstances.

推荐答案

我分析了您的问题并创建了演示，演示了如何解决该问题.该演示使用冻结的第一列生成网格:

I analysed your problem and created the demo which demonstrate how the problem can be solved. The demo produces the grid with the frozen first column:

我在jqGrid中的冻结列的当前(版本4.3.1)实现中发现了一些错误，稍后将发布我的建议如何将其修复为trirand.问题如下:

I found some bugs in the current (version 4.3.1) implementation of frozen columns in jqGrid and will post later my suggestions how to fix there to trirand. The problems are the following:

可以看到第一个问题，特别是在datatype: 'local'的情况下，其中在网格初始化期间将填充网格的数据.请参阅相应的演示，在该演示中，我仅将方法称为setFrozenColumns.人们可以在图片上看到问题

One can sees the first problem especially clear in case of datatype: 'local' where the data of the grid will be filled during the grid initialization. See the corresponding demo in which I just called the method setFrozenColumns. One can see the problem on the picture

在On上可以看到，只有列标题将被冻结，但是包含行号的列的网格主体(包括列)将被滚动.如何从下一个演示中看到，只需调用调用setFrozenColumns后直接使用方法_complete解决该问题:

On can see that only the column header will be frozen, but the grid body inclusive the column with row numbers will be scrolled. How one can see from the next demo it will be enough to call the method _complete directly after calling of setFrozenColumns to fix the problem:

$grid.jqGrid('setFrozenColumns');
$grid[0].p._complete.call($grid[0]);

其中$grid被定义为var $grid = $('#list');.

下一个问题是_complete方法仅使用以下元素的高度来计算列标题的固定部分(保存在$grid[0].grid.fhDiv中)和网格主体的固定部分(保存在$grid[0].grid.fbDiv中)的位置标准网格的标题(网格标题).因此，如果您使用setCaption更改标题，则冻结"潜水的位置可能错误.在setCaption之后调用_complete方法将无法解决问题，并且仍然具有类似演示:

The next problem is that _complete method calculate the position of the fixed part of the column header (saved in $grid[0].grid.fhDiv) and the fixed part of the grid body (saved in $grid[0].grid.fbDiv) only using the height of the standard grid's caption (grid title). So if your use setCaption to change the caption you can have "frozen" dives in the wrong position. The call of _complete method after the setCaption will not fix the problem and one still have the results like on the demo:

为解决此问题，我编写了非常简单的函数fixPositionsOfFrozenDivs

To fix the problem I wrote very simple function fixPositionsOfFrozenDivs

var fixPositionsOfFrozenDivs = function () {
        if (typeof this.grid.fbDiv !== "undefined") {
            $(this.grid.fbDiv).css($(this.grid.bDiv).position());
        }
        if (typeof this.grid.fhDiv !== "undefined") {
            $(this.grid.fhDiv).css($(this.grid.hDiv).position());
        }
    };

确定冻结的潜水位置.

最后，我将loadComplete的实现更改为以下内容:

At the end I changed a little the implementation of loadComplete to the following:

loadComplete: function () {
    var $this = $(this), newCapture = "", filters, rules, rule, op, i, iOp,
        postData = $this.jqGrid("getGridParam", "postData"),
        isFiltering = $this.jqGrid("getGridParam", "search");

    if (isFiltering === true && typeof postData.filters !== "undefined") {
        filters = $.parseJSON(postData.filters);
        newCapture = "Filter: [";
        rules = filters.rules;
        for (i = 0; i < rules.length; i++) {
            rule = rules[i];
            op = rule.op;  // the code name of the operation
            iOp = $.inArray(op, arOps);
            if (iOp >= 0 && typeof $.jgrid.search.odata[iOp] !== "undefined") {
                op = $.jgrid.search.odata[iOp];
            }
            newCapture += rule.field + " " + op + " '" + rule.data + "'";
            if (i + 1 !== rules.length) {
                newCapture += ", ";
            }
        }
        newCapture += "]";
    }
    $this.jqGrid("setCaption", newCapture);
    fixPositionsOfFrozenDivs.call(this);
}

其中数组arOps被定义为

var arOps = ["eq", "ne", "lt", "le", "gt", "ge", "bw", "bn", "in", "ni", "ew", "en",
             "cn", "nc"];

结果将是我引用的演示我的答案的开始.如果您要在搜索过滤器工具栏或高级搜索对话框中键入一些过滤器，则网格的标题将被更改(就像您的原始示例一样)，但所有冻结的潜水将具有正确的位置.

As the result one will have the demo which I referenced at the beginning of my answer. If you would type some filter in the searching filter toolbar or in the advanced searching dialog the caption of the grid will be changed (like in your original example), but all frozen dives will have the correct position.

这篇关于为什么Jqgrid冻结列似乎不适用于过滤器行和过滤器标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！