Question

我之前使用的是以下版本：

Jquery - 1.4.3
jqGrid - 4.1.2

现在我使用以下版本：

Jquery - 1.6.4
jqGrid - 4.3.1

使用最新版本，我注意到以下内容：

默认情况下不显示jqgrid的列排序图标。它们仅在单击列标题时显示。
jqgrid分页单元格pager_right为空。它应显示重新加载和搜索的图标
jqgrid调整大小句柄不显示。我正在使用

$（ “＃myjqgrid”）的jqGrid（ 'gridResize'，{minWidth：800，maxWidth：1405，了minHeight：350，maxHeight：680}）;

我比较了以下倍数，但一切似乎都相同

CSS
jqgrid定义

还有其他人经历过这个吗？或者我错过了什么？

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Jquery Grid</title>
        <link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.1.custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />
        <script src="js/jquery-1.6.4.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
        <script src="js/jquery.layout.js" type="text/javascript"></script>
        <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
        <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>  
        <script src="plugins/ui.multiselect.js" type="text/javascript"></script>
        <script src="plugins/jquery.tablednd.js" type="text/javascript"></script>
        <script src="plugins/jquery.contextmenu.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="content">
            <div class="userinfo">
                <table id="myjqgrid"></table>
                <div id="Pager"></div>                  
                <script src="js/myjqgrid.js" type="text/javascript"></script>                   
            </div>
        </div>
    </body>
</html>

JSON

{
    "colModel": [
        {
            "name": "ID",
            "label": "ID",
            "width": 60,
            "align": "left",
            "jsonmap": "cells.0.value",
            "sortable": true      
        },
        {
            "name": "FirstName",
            "label": "FirstName",
            "width": 100,
            "align": "left",
            "jsonmap": "cells.1.value",
            "sortable": false       
        },
        {
            "name": "LastName",
            "label": "LastName",
            "width": 100,
            "align": "left",
            "jsonmap": "cells.2.value",
            "sortable": false       
        }
    ],
    "colNames": [
        "ID",
        "FirstName",
        "LastName"
    ],
    "mypage": {
        "outerwrapper": {
            "page":"1",
            "total":"1",
            "records":"1",
            "innerwrapper": {
                "rows":[
                    {
                        "id":"1",
                        "cells":
                        [               
                            {
                                "value":"12345",
                                "label": "ID"                       
                            },
                            {
                                "value":"David",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Smith",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    },
                    {
                        "id":"2",
                        "cells":
                        [               
                            {
                                "value":"37546",
                                "label": "ID"                       
                            },
                            {
                                "value":"Willy",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Peacock",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    },
                    {
                        "id":"3",
                        "cells":
                        [               
                            {
                                "value":"62345",
                                "label": "ID"                       
                            },
                            {
                                "value":"Kim",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Holmes",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    },
                    {
                        "id":"4",
                        "cells":
                        [               
                            {
                                "value":"186034",
                                "label": "ID"                       
                            },
                            {
                                "value":"Andy",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Wills",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    }
                ]
            }
        }
    }
}

JQGrid定义（myjquery.js）

$(document).ready(function () { 
    $.ajax({
        type: "GET",
        url: "myjqgrid.json",
        data: "",
        dataType: "json",
        success: function(response){
            var columnData = response.mypage.outerwrapper,
                columnNames = response.colNames,
                columnModel = response.colModel;

            $("#myjqgrid").jqGrid({
                datatype: 'jsonstring',
                datastr: columnData,                
                colNames: columnNames,
                colModel: columnModel,
                jsonReader: {
                    root: "innerwrapper.rows",              
                    repeatitems: false
                },
                gridview: true,
                pager: "#Pager",
                rowNum: 2,
                rowList: [2, 4, 6, 8],
                viewrecords: true,              
                recordpos: 'left',
                multiboxonly: true,
                multiselect: true,
                sortname: 'id',
                sortorder: "desc",  
                sorttype: "text",   
                sortable: true,
                caption: "<h2>My JQGrid</h2>",
                width: "1406",      
                height: "100%",
                scrolloffset: 0,    
                loadonce: true,     
                cache: true,
                loadComplete: function(data){

                }
            });
        }
    });
    $("#myjqgrid").jqGrid('navGrid','#Pager');
    $("#myjqgrid").jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
});

Answer 1

对我来说，这是一个.png文件没有被拿起的情况。在jquery-ui.css中通过将../放在前面来更改你的相对引用，例如images / xxxxx.png变为../ images / xxxxxx.png

Answer 2

问题出现了一些小问题。

第一个问题。您应该在navGrid处理程序的内调用gridResize和success 的行。因此，在创建网格之后，将创建网格的导航器和调整大小元素。

您使用recordpos: 'left'将文本放置在“View 1-2 of 4”中，这些文本通常位于左侧部分寻呼机的右侧。然后您使用任何其他选项调用navGrid。因此默认情况下将使用position: 'left'。如果导航栏的位置在下面的文本如“View 1-2 of 4”，那么将看不到导航器图标。

您可以通过两种方式解决问题。您可以使用position: 'right'选项

$("#myjqgrid").jqGrid('navGrid','#Pager', {position: 'right'});

如果有人将收到the demo：

enter image description here

或者您可以使用代码

删除寻呼机的修复高度

$('#Pager').css("height", "auto");

请参阅another demo：

enter image description here

还有一个选项是删除recordpos: 'left'选项并接收标准导航器和寻呼机布局（请参阅here）：

enter image description here

jqgrid - 图标不显示 - 版本问题？

2 个答案: