jqgrid - значки не отображаются - проблема с версией? - PullRequest
0 голосов
/ 28 декабря 2011

Ранее я использовал следующие версии:

  • 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});
});

Ответы [ 2 ]

2 голосов
/ 30 декабря 2014

Для меня это был случай, когда файлы .png не были подобраны.В jquery-ui.css измените относительную ссылку, указав ../ в начале, например, images / xxxxx.png становится ../images/xxxxxx.png

1 голос
/ 29 декабря 2011

Есть несколько небольших проблем, которые следуют за этой проблемой.

Первая проблема.Вы должны переместить строки, где вы вызываете navGrid и gridResize внутри обработчика success.Таким образом, навигатор и элемент изменения размера сетки будут созданы после того, как будет создана другая сетка.

Вы используете recordpos: 'left', который размещает текст как «Вид 1-2 из 4»которые, как правило, из правой части пейджера в левой части.Затем вы позвонили navGrid с любой дополнительной опцией.Таким образом, position: 'left' будет использоваться по умолчанию.Если в этом случае панель навигации будет размещена под текстом, подобным «View 1-2 of 4», и значки навигации не будут отображаться.

Вы можете устранить проблему вдва пути.Либо вы можете использовать position: 'right' опция

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

В случае, если вы получите демо :

enter image description here

или вы можетеудалить фиксированную высоту пейджера с кодом

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

см. еще одну демонстрацию :

enter image description here

Еще один вариант - просто удалить *Опция 1040 * и получите стандартный макет навигатора и пейджера (см. здесь ):

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...