JqG​​rid 免费显示在 chrome 中不起作用，因为它在 IE 11 中表现良好

JqGrid free display not working in chrome as it does nicely in IE 11

我试图找出我使用 jqGrid 免费玩过的当前测试代码有什么问题。我已经评估了一些，我必须选择 jqGrid，因为它使用起来非常灵活。 但是，我遇到了这个问题，所以我不确定它是来自我正在使用的 js 集还是其他原因，因为我做的有点不同。我正在使用内联编辑。尽管很奇怪，它在 IE 11 中显示得很好，但在 Chrome 版本 61.0.3163.100（官方构建）（32 位）中却很糟糕。 这是我的代码

<html>
<head>


<title>Test jqGrid free</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.min.css ">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

    <script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.min.js"></script>
    <script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/css/ui.multiselect.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/min/ui.multiselect.js"></script>         




<script type="text/javascript">


      var URL = 'group.json';



    $.extend(true, $.jgrid.inlineEdit, {

        });
    $.extend($.jgrid.defaults, {
                datatype: 'json',
                jsonReader : {
                    repeatitems:false
                },
                height: 'auto',
                viewrecords: true,
                rowList: [10, 20, 30],
                altRows: true,
                loadError: function(xhr, status, error) {
                    alert(error);
                }
            });

jQuery.extend(
    jQuery.jgrid.edit, {
        closeAfterEdit: true,
        closeAfterAdd: true,
        ajaxEditOptions: { contentType: "application/json" },
        mtype: 'PUT',
        EditData: function(postData) {
            return JSON.stringify(postData);
        }
    }
);



$(document)
.ready(

    function() {
        $("#list")
                .jqGrid(
                        {
                            url : URL,
                            datatype : 'json',
                            mtype : 'GET'

 ,
 serializeRowData: function (postdata) {

        var json = JSON.stringify(postdata);

            return json;

},  
                            colNames : ['Code', 'Name','Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
                                    'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                             colModel : [ 
                            {
                                name : 'projectCode',
                                index : 'projectCode',
                                width : 70,
                                editable : false

                            }, {
                                name : 'projectName',
                                index : 'projectName',
                                width : 120,
                                editable : false
                           }, {
                                name : 'january', 
                                index : 'january',
                                width : 60,
                                editable : true,
                                editoptions: {
                                      defaultValue: '0'
                                }                        
                            }, {
                                name : 'february', 
                                index : 'february',
                                width : 60,
                               editable : true,
                                editoptions: {
                                      defaultValue: '0'
                                }                        
                            }, {
                                name : 'march',
                                index : 'march',
                                width : 60,
                               editable : true,
                                editoptions: {
                                      defaultValue: '0'
                                }                        
                            }, {
                                name : 'april',
                                index : 'april',
                                width : 60,
                                editable : true,
                                editoptions: {
                                      defaultValue: '0'
                                }                        
                            }, {
                                name : 'may',
                                index : 'may',
                                width : 60,
                                editable : true,
                                editoptions: {
                                      defaultValue: '0'
                                }                        
                            }, {
                                name : 'june',
                                index : 'june',
                                width : 60,
                                editable : true,
                                editoptions: {
                                      defaultValue: '0'
                                }                        
                            }, {
                                name : 'july',
                                index : 'july',
                                width : 60,
                                 editable : true,
                                editoptions: {
                                      defaultValue: '0'
                                }                        
                            }, {
                                name : 'august',
                                index : 'july',
                                width : 60,
                               editable : true,
                                editoptions: {
                                      defaultValue: '0'
                                }                        
                            }, {
                                name : 'september',
                                index : 'september',
                                width : 60,
                                 editable : true,
                                editoptions: {
                                      defaultValue: '0'
                                }                        
                            }, {
                                name : 'october',
                                index : 'october',
                                width : 60,
                                 editable : true,
                                editoptions: {
                                      defaultValue: '0'
                                }                        
                            }, {
                                name : 'november',
                                index : 'november',
                                width : 60,
                                 editable : true,
                                editoptions: {
                                      defaultValue: '0'
                                }                        
                            }, {
                                name : 'december',
                                index : 'december',
                                width : 60,
                                 editable : true,
                                editoptions: {
                                      defaultValue: '0'
                                }                        
                            } ],
                            iconSet: "fontAwesome",
                            rownumbers: true,                                                       
                            pager : '#pager',
                            rowNum : 25,
                            rowList : [ 10, 20, 30 ],

                            grouping: true,
                            groupingView: {
                                groupField: ["projectName"],
                                groupColumnShow: [true],
                                groupText: ["<b>{0}</b>"],
                                groupOrder: ["asc"],
                                groupSummary: [true],
                                groupCollapse: false
                            },
                           viewrecords : true,
                             caption : 'Test',
                            editurl: URL, 
                           editable: true,
                            datatype : 'json',
                        }

                        )
            .jqGrid('navGrid', '#pager', 
                    {
                        edit : false,
                        add : false,
                        del : false,
                        search : false
                    }
                    )                       
;



        function reload(rowid, result) {
            console.log('inside reload');
          $("#list").trigger("reloadGrid"); 
        };

        var reloadGridFunc = function () {
             var $self = $(this);
            setTimeout(function () {
                $self.setGridParam({ datatype: 'json' });
                $self.trigger("reloadGrid");
            }, 500);
        };  


        var editoptions = {         
            keys: true,   
            mtype: "PUT",
            url: URL + '/1',    
            successfunc: reloadGridFunc
        };  


        jQuery("#list").jqGrid('setGroupHeaders', {
        useColSpanStyle: false, 
        groupHeaders:[
        {startColumnName: 'projectCode', numberOfColumns: 2, titleText: '<em>Project</em>'},
            {startColumnName: 'january', numberOfColumns: 12, titleText: 'Calendar'}
        ]
        }),         

        jQuery("#list").jqGrid("inlineNav", "#pager", {
        add:true,
        edit:true,
        save:true,
            addParams: {
            position: "last",
                addRowParams: editoptions
           },
            editParams: editoptions

        });

    })

            ;


        // Avoid `console` errors in browsers that lack a console.
        (function() {
            var method;
            var noop = function () {};
            var methods = [
                'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
                'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
                'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
                'timeStamp', 'trace', 'warn'
            ];
            var length = methods.length;
            var console = (window.console = window.console || {});

            while (length--) {
                method = methods[length];

                // Only stub undefined methods.
                if (!console[method]) {
                    console[method] = noop;
                }
            }
        }());           
</script>
</head>
<body>
    <br/> <br/>
        <div id="pager"></div>
        <table id="list"></table>


  <br>

</body>
</html>

以下是 IE 和 Chrome 的图像 即：Good diplay

Chrome : Not quite expected display as for IE

至于 json 数据，我使用如下：

{
    "rows":
    [
        {"projectCode":"A","projectName":"Project A","january":1.0,"february":0.0,"march":0.0,"april":0.0,"may":0.0,"june":0.0,"july":0.0,"august":0.0,"september":0.0,"october":0.0,"november":0.0,"december":1.0}
    ]
}

我是不是忽略了什么？

您需要始终添加行

<!DOCTYPE html>

之前

<html>

在所有 HTML5 个文档中。