jquery - 为什么 Jqgrid 卡住列似乎不能与过滤器行和过滤器标题一起使用？

Question

我无法让卡住列与 jqgrid (4.3.0) 一起使用。我唯一能想到的是我有一些不是开箱即用的具体东西:

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

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

   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);
   

任何人都可以想到任何可以阻止卡住列在这种情况下工作的方法吗？

Answer 1

我分析了您的问题并创建了 the demo它演示了如何解决问题。该演示生成具有卡住第一列的网格:

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

在 datatype: 'local' 的情况下，第一个问题尤其明显。网格初始化期间将填充网格数据。请参阅the corresponding demo我刚刚在其中调用了方法 setFrozenColumns 。从图片上就可以看出问题

可以看到，只有列标题会被卡住，但包含行号列的网格体会滚动。从the next demo可以看出什么调用方法 _complete 就足够了直接调用 setFrozenColumns 后解决问题:

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

哪里$grid定义为var $grid = $('#list'); .

下一个问题是 _complete方法仅使用标准网格标题(网格标题)的高度来计算列标题的固定部分(保存在 $grid[0].grid.fhDiv )和网格主体的固定部分(保存在 $grid[0].grid.fbDiv )的位置。所以如果你使用setCaption要更改标题，您可以在错误的位置“卡住”潜水。 _complete的来电setCaption之后的方法不会解决问题，并且仍然会得到类似 the demo 的结果:

为了解决这个问题，我编写了非常简单的函数 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 的实现到以下内容:

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"];

结果将是 the demo我在答案开头引用了这一点。如果您在搜索过滤器工具栏或高级搜索对话框中输入一些过滤器，网格的标题将被更改(就像在原始示例中一样)，但所有卡住的潜水将具有正确的位置。