2

我已经动态生成了数据类型为“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;

        }
    };
4

1 回答 1

0

I manage to fixed the issue help with How can i get jqgrid frozen columns to work with word wrap on

It is also important to set the row height

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

Then after that need to reload the grid again. Not sure why it need to relaod.

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

If you are upgrade jqgrid version to 4.6.0. It is no necessary to reload the grid.

After end of loading the gird calling fallowing method will fixed the header rows. not necessary 

 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());
        }
    };
于 2014-07-25T05:50:47.883 回答