0

我有一个从服务器加载的网格，因为列由数据选择控制。我的这部分工作正常，但我想冻结第 1 列。

我在 json 模型定义中设置了 frozen:true 属性，但它只冻结了标题。

我尝试将列设置为在 ajax 调用的成功事件中冻结。

谢谢。

$(document).ready(function () {
    var functionsMapping = {
        "fncSplitOrders": function (pCellValue, pOptions, pRowObject) {
            var strCell=pCellValue.replace(/\|/g,'<br />'); 
            return strCell;
        }
    };
    $.ajax({
        type: "GET",
        url: "json/MachineJobsSummary.asp?qryDatabase="+$('#wsDatabase').val(),
        data: "",
        dataType: "json",
        success: function (result) {
            var columnData = result.mypage.outerwrapper,
                    columnNames = result.colNames,
                    columnModel = result.colModel;
            var i,objCol;

            for (i=0;i<columnModel.length;i++) {
                objCol = columnModel[i];
                if (objCol.hasOwnProperty("formatter") &&
                    functionsMapping.hasOwnProperty(objCol.formatter)) {
                    objCol.formatter = functionsMapping[objCol.formatter];
                }
            }
            $("#dataGrid").jqGrid({
                 datatype: 'jsonstring'
                ,datastr: columnData
                ,colNames: columnNames
                ,colModel: columnModel
                ,jsonReader: {
                     root: 'innerwrapper.rows'
                    ,repeatitems: false
                    ,id: "ID"
                    }
                ,gridview: true
                ,loadonce: false
                ,height: 600
                ,width:1000
                ,shrinkToFit: false
                ,rowNum: 10000
                ,autoencode: true
                ,viewrecords: true
                ,sortable: false
            });
            $("#dataGrid").jqGrid('setFrozenColumns');
        }
    });
});

Json 数据（我是从 firefug 复制的，但我已经重新格式化，所以希望重新格式化时不会出错）

{   "colModel"  :   [   {"name": "GTTWO_PROD_GROUP","index": "GTTWO_PROD_GROUP" ,"width": 60,"align": "left", "frozen":true,"sortable":false } 
                                ,   {"name": "WSJOB_70186_1","index": "WSJOB_70186_1" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_60607","index": "WSJOB_60607" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_32446","index": "WSJOB_32446" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_61026B","index": "WSJOB_61026B" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_61838","index": "WSJOB_61838" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_71102C","index": "WSJOB_71102C" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_71048A","index": "WSJOB_71048A" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_62565","index": "WSJOB_62565" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_71056F","index": "WSJOB_71056F" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_71030A","index": "WSJOB_71030A" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_71033A","index": "WSJOB_71033A" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ]
, "colNames"    :   ["Prod Group" ,"70186_1","60607","32446","61026B","61838","71102C","71048A","62565","71056F","71030A","71033A"]
, "mypage"      :   {   "outerwrapper":  "page":"1","total":"1","records":"21", 
                                    "innerwrapper": 
                                    {"rows":[   {"ID":1,"GTTWO_PROD_GROUP":"      ","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP02852     |WP02853     ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":" ","WSJOB_71030A":" ","WSJOB_71033A":" "}
                                                    ,   {"ID":2,"GTTWO_PROD_GROUP":"BARREL","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":" ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":"WP01037     ","WSJOB_71030A":" ","WSJOB_71033A":" "}
                                                    ,   {"ID":3,"GTTWO_PROD_GROUP":"BBAR  ","WSJOB_70186_1":" ","WSJOB_60607":"WP74512     |WP74570     ","WSJOB_32446":" ","WSJOB_61026B":"WP79037     |WP79039     ","WSJOB_61838":" ","WSJOB_71102C":" ","WSJOB_71048A":"WP00463     |WP00464     ","WSJOB_62565":"WP99555     |WP99556     ","WSJOB_71056F":" ","WSJOB_71030A":"WP99992     |WP99993     ","WSJOB_71033A":" "}
                                                    ,   {"ID":4,"GTTWO_PROD_GROUP":"BBCAP ","WSJOB_70186_1":" ","WSJOB_60607":"WP74427     |WP74428     ","WSJOB_32446":" ","WSJOB_61026B":"WP78432     |WP79587     |WP78433     ","WSJOB_61838":" ","WSJOB_71102C":" ","WSJOB_71048A":"WP00461     |WP00462     ","WSJOB_62565":"WP00445     |WP00447     |WP00446     ","WSJOB_71056F":" ","WSJOB_71030A":"WP99986     |WP99988     |WP99987     ","WSJOB_71033A":"WP99884     |WP99886     |WP99885     "}
                                                    ,   {"ID":5,"GTTWO_PROD_GROUP":"BKSA  ","WSJOB_70186_1":" ","WSJOB_60607":"WP74425     |WP74616     |WP74615     |WP74426     ","WSJOB_32446":"WP72673     |WP72674     ","WSJOB_61026B":"WP78436     |WP78440     |WP78438     |WP78437     ","WSJOB_61838":" ","WSJOB_71102C":"WP02831     |WP02843     |WP02842     |WP02834     ","WSJOB_71048A":"WP00468     |WP00475     |WP00472     |WP00471     ","WSJOB_62565":"WP99559     |WP99563     |WP99561     |WP99560     ","WSJOB_71056F":"WP01035     |WP01043     ","WSJOB_71030A":"WP00013     |WP00020     |WP00017     |WP00016     ","WSJOB_71033A":"WP99890     |WP99895     |WP99894     |WP99893     "}
                                                    ,   {"ID":6,"GTTWO_PROD_GROUP":"BRGA  ","WSJOB_70186_1":" ","WSJOB_60607":"WP74482     |WP74483     ","WSJOB_32446":" ","WSJOB_61026B":"WP78426     |WP78427     ","WSJOB_61838":" ","WSJOB_71102C":"WP02832     |WP02833     ","WSJOB_71048A":"WP00469     |WP00474     |WP00473     |WP00470     ","WSJOB_62565":"WP99572     |WP99580     |WP99575     |WP99573     ","WSJOB_71056F":"WP01032     |WP01042     |WP01041     |WP01034     ","WSJOB_71030A":"WP00014     |WP00019     |WP00018     |WP00015     ","WSJOB_71033A":"WP99891     |WP99892     "}
                                                    ,   {"ID":7,"GTTWO_PROD_GROUP":"CAP   ","WSJOB_70186_1":" ","WSJOB_60607":"WP74367     |WP74876     |WP74875     |WP74430     |WP74429     |WP74369     |WP74368     ","WSJOB_32446":" ","WSJOB_61026B":"WP78430     |WP81510     |WP78705     ","WSJOB_61838":" ","WSJOB_71102C":" ","WSJOB_71048A":"WP00458     |WP00460     |WP00459     ","WSJOB_62565":"WP00442     |WP04759     |WP04692     |WP04156     |WP04147     |WP01596     |WP01593     |WP00450     ","WSJOB_71056F":" ","WSJOB_71030A":"WP99989     |WP99991     |WP99990     ","WSJOB_71033A":"WP99887     |WP99889     |WP99888     "}
                                                    ,   {"ID":8,"GTTWO_PROD_GROUP":"CASE  ","WSJOB_70186_1":" ","WSJOB_60607":"WP74541     |WP74569     |WP74551     |WP74550     |WP74549     |WP74548     |WP74547     |WP74546     |WP74544     |WP74543     |WP74542     ","WSJOB_32446":" ","WSJOB_61026B":"WP78408     |WP80811     |WP80004     |WP79981     |WP79980     |WP79167     |WP79166     |WP78919     |WP78425     |WP78420     |WP78419     |WP78418     |WP78417     |WP78416     |WP78415     |WP78414     |WP78413     |WP78412     |WP78410     |WP78409     ","WSJOB_61838":" ","WSJOB_71102C":"WP02847     |WP86421     |WP86420     |WP03370     |WP03286     |WP02856     |WP02855     |WP02851     |WP02850     |WP02848     ","WSJOB_71048A":"WP00227     |WP97748     |WP00485     |WP00484     |WP00483     |WP00482     |WP00481     |WP00480     |WP00478     |WP00477     |WP00451     ","WSJOB_62565":"WP99850     |WP99865     |WP99864     |WP99863     |WP99862     |WP99861     |WP99860     |WP99859     |WP99858     |WP99855     |WP99854     |WP99853     ","WSJOB_71056F":"WP01006     |WP01039     |WP01031     |WP01016     |WP01015     |WP01013     |WP01011     |WP01007     ","WSJOB_71030A":"WP00004     |WP99984     |WP00012     |WP00011     |WP00010     |WP00009     |WP00008     |WP00007     |WP00006     |WP00005     ","WSJOB_71033A":" "}
                                                    ,   {"ID":9,"GTTWO_PROD_GROUP":"FEEDER","WSJOB_70186_1":" ","WSJOB_60607":"WP74545     ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":"WP89008     |WP89770     |WP89769     |WP89044     |WP89022     |WP89010     |WP89009     ","WSJOB_71102C":" ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":"WP01014     ","WSJOB_71030A":" ","WSJOB_71033A":" "}
                                                    ,   {"ID":10,"GTTWO_PROD_GROUP":"GBOX  ","WSJOB_70186_1":"WP71957     |WP71959     ","WSJOB_60607":"WP74262     ","WSJOB_32446":" ","WSJOB_61026B":"WP81151     |WP81152     ","WSJOB_61838":" ","WSJOB_71102C":"WP02857     |WP02868     |WP02867     |WP02858     ","WSJOB_71048A":"WP00486     |WP00494     |WP00493     |WP00487     ","WSJOB_62565":"WP99565     ","WSJOB_71056F":"WP01048     |WP01049     ","WSJOB_71030A":"WP00022     ","WSJOB_71033A":"WP00317     "}
                                                    ,   {"ID":11,"GTTWO_PROD_GROUP":"GEAR  ","WSJOB_70186_1":" ","WSJOB_60607":"WP74513     ","WSJOB_32446":" ","WSJOB_61026B":"WP81211     |WP81218     |WP81217     |WP81216     |WP81215     |WP81214     |WP81213     |WP81212     ","WSJOB_61838":" ","WSJOB_71102C":"WP02859     |WP02872     |WP02871     |WP02870     |WP02869     |WP02862     |WP02861     |WP02860     ","WSJOB_71048A":"WP00488     |WP00498     |WP00497     |WP00496     |WP00495     |WP00491     |WP00490     |WP00489     ","WSJOB_62565":"WP99566     |WP99570     |WP99569     |WP99568     |WP99567     ","WSJOB_71056F":"WP01050     |WP01053     |WP01052     |WP01051     ","WSJOB_71030A":"WP00023     |WP00026     |WP00025     |WP00024     ","WSJOB_71033A":"WP00318     |WP00321     |WP00320     |WP00319     "}
                                                    ,   {"ID":12,"GTTWO_PROD_GROUP":"INFLBX","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP03369     ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":"WP01421     |WP05578     |WP05577     |WP01423     ","WSJOB_71030A":" ","WSJOB_71033A":" "}
                                                    ,   {"ID":13,"GTTWO_PROD_GROUP":"LUB   ","WSJOB_70186_1":" ","WSJOB_60607":"WP74469     ","WSJOB_32446":" ","WSJOB_61026B":"WP78441     ","WSJOB_61838":" ","WSJOB_71102C":"WP02864     ","WSJOB_71048A":"WP05069     ","WSJOB_62565":"WP02866     ","WSJOB_71056F":"WP01055     ","WSJOB_71030A":"WP00027     ","WSJOB_71033A":" "}
                                                    ,   {"ID":14,"GTTWO_PROD_GROUP":"MTGF  ","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":"WP79165     ","WSJOB_61838":" ","WSJOB_71102C":" ","WSJOB_71048A":"WP00729     ","WSJOB_62565":"WP01394     |WP05435     |WP01492     |WP01491     ","WSJOB_71056F":" ","WSJOB_71030A":"WP00001     |WP03710     |WP03709     ","WSJOB_71033A":" "}
                                                    ,   {"ID":15,"GTTWO_PROD_GROUP":"PACKER","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP02854     ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":" ","WSJOB_71030A":" ","WSJOB_71033A":" "}
                                                    ,   {"ID":16,"GTTWO_PROD_GROUP":"SCOMB ","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":"WP78421     |WP78422     ","WSJOB_61838":" ","WSJOB_71102C":"WP03371     ","WSJOB_71048A":" ","WSJOB_62565":"WP99557     |WP99558     ","WSJOB_71056F":"WP01047     ","WSJOB_71030A":"WP99994     |WP99995     ","WSJOB_71033A":" "}
                                                    ,   {"ID":17,"GTTWO_PROD_GROUP":"SEG   ","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP02822     |WP02827     |WP02825     |WP02823     ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":"WP01029     |WP01030     ","WSJOB_71030A":" ","WSJOB_71033A":" "}
                                                    ,   {"ID":18,"GTTWO_PROD_GROUP":"SPUR  ","WSJOB_70186_1":" ","WSJOB_60607":"WP74416     ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP02841     |WP02945     ","WSJOB_71048A":" ","WSJOB_62565":"WP99574     ","WSJOB_71056F":"WP01033     |WP01040     ","WSJOB_71030A":" ","WSJOB_71033A":" "}
                                                    ,   {"ID":19,"GTTWO_PROD_GROUP":"USPD  ","WSJOB_70186_1":"WP71960     ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP02865     ","WSJOB_71048A":" ","WSJOB_62565":"WP99571     ","WSJOB_71056F":"WP01057     ","WSJOB_71030A":" ","WSJOB_71033A":" "}
                                                    ,   {"ID":20,"GTTWO_PROD_GROUP":"WPASSY","WSJOB_70186_1":" ","WSJOB_60607":"WP74666     |WP74835     ","WSJOB_32446":" ","WSJOB_61026B":"WP78423     |WP78428     ","WSJOB_61838":" ","WSJOB_71102C":"WP02817     |WP02829     |WP02828     ","WSJOB_71048A":"WP00466     ","WSJOB_62565":"WP99552     |WP99554     ","WSJOB_71056F":"WP01005     |WP01027     |WP01025     ","WSJOB_71030A":"WP99997     |WP99999     ","WSJOB_71033A":" "}
                                                    ,   {"ID":21,"GTTWO_PROD_GROUP":"WPLT  ","WSJOB_70186_1":" ","WSJOB_60607":"WP74667     |WP74832     ","WSJOB_32446":" ","WSJOB_61026B":"WP78424     |WP78429     ","WSJOB_61838":" ","WSJOB_71102C":"WP02818     ","WSJOB_71048A":"WP00467     |WP00479     ","WSJOB_62565":"WP00443     |WP99579     |WP99553     |WP01601     |WP01595     |WP00444     ","WSJOB_71056F":"WP01026     |WP01028     ","WSJOB_71030A":"WP00000     |WP99998     ","WSJOB_71033A":" "}
                                                    ]
                                    }
                                }
}

添加模板并包含在 colModel 中的更改。

    var myJobTemplate   = {width: 100,align: "left",sortable:false, formatter:fncSplitOrders,unformat:fncReturnValue};

然后模型的 json 已更新为

{   "colModel"  :   [   {"name": "GTTWO_PROD_GROUP","index": "GTTWO_PROD_GROUP" ,"width": 60,"align": "left", "frozen":true,"sortable":false } 
                    ,   {"name": "WSJOB_70186_1","template":"myJobTemplate" } .....

但是 fncSplitOrders 没有被执行。

我将它留在了您创建的函数映射中，并将其添加为它自己的函数，但是如果单元格数据没有格式化，所有这些都会得到输出。

显然缺少关于如何触发/引用模板/函数的简单内容。

谢谢。

4

1 回答 1

1

首先，您应该修复 JSON 数据。您在问题中发布了错误的数据。那个部分

"outerwrapper":  "page":"1", ...}

应固定为

"outerwrapper": { "page":"1", ...}}

可能这只是您问题文本中的错误。

我已经在答案和这个中描述的冻结 div 大小错误的主要问题。

所以你应该触发“jqGridAfterGridComplete”事件并额外调用fixPositionsOfFrozenDivs.

您将在演示中看到的结果是哪个代码

$(function () {
    "use strict";
    var functionsMapping = {
            "fncSplitOrders": function (pCellValue, pOptions, pRowObject) {
                var strCell=pCellValue.replace(/\|/g,'<br />');
                return strCell;
            }
        },
        fixPositionsOfFrozenDivs = function () {
            var $rows;
            if (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 (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());
            }
        };

    $.ajax({
        type: "GET",
        url: "Keith1.json",
        data: "",
        dataType: "json",
        success: function (result) {
            var columnData = result.mypage.outerwrapper,
                columnNames = result.colNames,
                columnModel = result.colModel,
                i,
                objCol,
                $grid = $("#dataGrid");

            for (i = 0; i<columnModel.length; i++) {
                objCol = columnModel[i];
                if (objCol.hasOwnProperty("formatter") &&
                    functionsMapping.hasOwnProperty(objCol.formatter)) {
                    objCol.formatter = functionsMapping[objCol.formatter];
                }
            }
            $grid.jqGrid({
                datatype: 'jsonstring',
                datastr: columnData,
                colNames: columnNames,
                colModel: columnModel,
                jsonReader: {
                    root: 'innerwrapper.rows',
                    repeatitems: false,
                    id: "ID"
                }
                gridview: true,
                height: 600,
                width: 1000,
                shrinkToFit: false,
                rowNum: 10000,
                autoencode: true,
                viewrecords: true
            });
            $grid.jqGrid('setFrozenColumns');
            $grid.triggerHandler("jqGridAfterGridComplete");
            fixPositionsOfFrozenDivs.call($grid[0]);
        }
    });
});

此外，我建议您简化列模型。我建议您删除index属性，移动通用设置cmTemplete并删除许多具有默认值的属性："align": "left","sortable":false.

于 2013-05-18T19:18:01.173 回答