jquery - 具有 jsonstring 数据类型的 JQGrid 卡住列

Question

我已经动态生成了数据类型为“jsonstring”的jqgrid。似乎 .jqGrid('setFrozenColumns');无法正常工作。只有标题被卡住，而不是实际的数据行。当我对网格卡住列进行排序时。但它破坏了布局。

下面是我的实现

    $.ajax({
            url: myUrl,
            type: 'POST',
            data: { issueDate:issueDate },
            success: function (result) {

                var i;
                var cm;
                var colModels = result.Json.colModels;
                var colNames = result.Json.colNames;
                var coldata = result.Json.data.options;
                for (i = 0; i < colModels.length; i++) {
                    cm = colModels[i];
                    if (cm.hasOwnProperty("formatter")) {
                        cm.formatter = functionsMapping[cm.formatter];
                    }
                }

                $("#ObserationSummarytable").jqGrid({
                    datatype: 'jsonstring',
                    datastr: coldata,
                    colNames: colNames,
                    colModel: colModels,
                    jsonReader: {
                        root: 'rows',
                        repeatitems: false
                    },
                    gridview: true,
                    rowNum: 50,
                    width: 1200,
                    height: 500,
                    loadtext: "Loading.....",
                    hoverrows: false,
                    autoencode: true,
                    ignoreCase: true,
                    scrollerbar: true,
                    rowList: [50, 100, 150],
                    viewrecords: true,
                    autowidth: true,
                    shrinkToFit: false,
                    forceFit: true,
                    pager: $('#ObserationSummarypager'),
                    loadonce: true,
                    gridComplete: LoadComplete
}).jqGrid('setFrozenColumns');

生成colmodel

[{"name":"District", "width":80, "align":"left", "sortable": true,"formatter":"ShowGraphlink","frozen": true },{"name":"StationName","width":150, "align":"left", "sortable": true,"formatter":"ShowGraphlink","frozen": true },{"name":"FDL", "width":40, "align":"center", "sortable": true ,"formatter":"FormatFDL" ,"frozen": true  },{"name":"DataType", "width":60, "align":"left", "sortable": false,"formatter":"FormatDataType","frozen": true },{"name":"AWDValue","hidden": true ,"frozen": true  },{"name":"08:44","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"},{"name":"08:36","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"},{"name":"08:14","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"},{"name":"08:06","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"},{"name":"07:44","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"},{"name":"07:36","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"},{"name":"07:14","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"},{"name":"07:06","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"},{"name":"06:44","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"}]

加载完整功能

   function LoadComplete() {
        var gridRowCount = $('#ObserationSummarytable').getGridParam('records');
        if (gridRowCount == null || gridRowCount == 0) // are there any records?
        {

            $("#divNoRecord").show();
            $("#divSummaryGrid").hide();
        } else {
            $("#divNoRecord").hide();
            $("#divSummaryGrid").show();

        }
    }

函数映射

var functionsMapping = {
        // here we define the implementations of the custom formatter which we use
        "ShowGraphlink": function (cellValue, opts, rowObject) {

            return "link";
        },
        "FormatCellValues": function (cellValue, opts, rowObject) {

            return cellHtml;
        },
        "FormatDataType": function (cellValue, opts, rowObject) {

            return 'some html';
        },
        "FormatFDL": function (cellValue, opts, rowObject) {

            return cellValue;

        }
    };

Answer 1

我设法解决了问题帮助 How can i get jqgrid frozen columns to work with word wrap on

设置行高也很重要

 .ui-jqgrid tr.jqgrow td { height: 40px; padding-top: 0px;}

然后需要再次重新加载网格。不知道为什么需要重新启动。

.jqGrid('setFrozenColumns').trigger("reloadGrid");

如果您要将jqgrid版本升级到4.6.0。无需重新加载网格。

加载网格结束后，调用以下方法将修复标题行。没有必要

 function FixedColHeaders()
    {

        fixPositionsOfFrozenDivs.call($("#ObserationSummarytable")[0]);

    }

    fixPositionsOfFrozenDivs = function () {
        var $rows;
        if (typeof this.grid.fbDiv !== "undefined") {
            $rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv);
            $('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) {
                var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
                if ($(this).hasClass("jqgrow")) {
                    $(this).height(rowHight);
                    rowHightFrozen = $(this).height();
                    if (rowHight !== rowHightFrozen) {
                        $(this).height(rowHight + (rowHight - rowHightFrozen));
                    }
                }
            });
            $(this.grid.fbDiv).height(this.grid.bDiv.clientHeight);
            $(this.grid.fbDiv).css($(this.grid.bDiv).position());
        }
        if (typeof this.grid.fhDiv !== "undefined") {
            $rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv);
            $('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) {
                var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
                $(this).height(rowHight);
                rowHightFrozen = $(this).height();
                if (rowHight !== rowHightFrozen) {
                    $(this).height(rowHight + (rowHight - rowHightFrozen));
                }
            });
            $(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
            $(this.grid.fhDiv).css($(this.grid.hDiv).position());
        }
    };