Пустая подсказка отображается в ячейках JQGrid и сортировка не работает должным образом - PullRequest
0 голосов
/ 15 марта 2012

Я использовал JGGrid (версия 4.1.1) в своем приложении. Проблема с моей сеткой в ​​том, что всплывающая подсказка отображается и для пустых ячеек. Как избежать или скрыть всплывающую подсказку, если данные недоступны в ячейке сетки? В одном посте я читал, что эта проблема решена начиная с версии 3.6 JQGrid. Но все еще это идет. Может кто-нибудь помочь мне решить эту проблему.

Обновление № 1

Другая проблема с этим кодом - сортировка. Это не работает должным образом. Столбец Номер детали не сортируется, а столбцы, такие как Длина, Диаметр и Глобальные отгрузки, сортируются по типу текста вместо типа с плавающей точкой. Я указал тип сортировки как float для этих столбцов. но все же они сортируются по текстовым значениям.

Вот мой код (в нем есть как всплывающая подсказка, так и проблемы с сортировкой):

jqGrid Demos

    <link rel="stylesheet" type="text/css" media="screen" href="themes/blitzer/jquery-ui-1.8.16.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />  
    <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script> 
    <script src="js/grid.locale-en.js" type="text/javascript"></script>        
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>  

    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true; 

        var mydata = [];
        var jsonColModel = {};

        $(function () {
            mydata = [
                { //hiding the data as it is conf.. }];

            var strColumnModelold = '[{ "label": "Part Number", "name": "partNumber", "index": "partNumber ", "width": 80 }, { "label": "Part Revision", "name": "partRevision", "index": "partRevision", "width": 50, "align": "center" }, { "label": "Part Status", "name": "partStatus", "index": "partStatus", "width": 80, "hidden": true }, { "label": "Policy", "name": "policy", "index": "policy", "width": 100, "hidden": true }, { "label": "Status", "name": "status", "index": "status", "width": 80 }, { "label": "IDM", "name": "idm", "index": "idm", "width": 45, "align": "center" }, { "label": "IDM2", "name": "idm2", "index": "idm2", "width": 45, "hidden": true, "align": "center" }, { "label": "Part Type", "name": "partType", "index": "partType", "width": 75, "align": "center" }, { "label": "Diameter [min] (mm)", "name": "diameterMinMm", "index": "diameterMinMm", "width": 50, "hidden": true, "align": "center", "sortType": "float" }, { "label": "Diameter [max] (mm)", "name": "diameterMaxMm", "index": "diameterMaxMm", "width": 50, "hidden": true, "align": "center", "sortType": "float" }, { "label": "Diameter [nominal] (mm)", "name": "diameterNomMm", "index": "diameterNomMm", "width": 50, "align": "center", "sortType": "float" }, { "label": "Length [min] (mm)", "name": "lengthMinMm", "index": "lengthMinMm", "width": 50, "hidden": true, "align": "center", "sortType": "float" }, { "label": "Length [max] (mm)", "name": "lengthMaxMm", "index": "lengthMaxMm", "width": 50, "hidden": true, "align": "center", "sortType": "float" }, { "label": "Length [nominal] (mm)", "name": "lengthNomMm", "index": "lengthNomMm", "width": 50, "align": "center", "sortType": "float" }, { "label": "Global Shipments", "name": "globalShipments", "index": "globalShipments", "width": 50, "align": "center", "sortType": "float" }, { "label": "IFP", "name": "ifp", "index": "ifp", "width": 35, "align": "center" }, { "label": "Inch or Metric", "name": "metricSystem", "index": "metricSystem", "width": 45, "align": "center"}]';

            jsonColModel = $.parseJSON(strColumnModelold);
            createGrid();
        });

        function createGrid() {

            $("#list2").jqGrid({
                datatype: 'local',
                data: mydata,
                colModel: jsonColModel,
                rowNum: 10,
                rowList: [10, 25, 50],
                pager: '#pager2',
                page: 1,
                gridview: true,
                rownumbers: false,
                viewrecords: true,
                altRows: true,
                loadtext: "Loading parts data...",
                ajaxGridOptions: { cache: false },
                caption: 'Part Data',
                width: 713,
                shrinkToFit: false,
                scrollOffset: 0,
                height: '100%'
            });
        }
    </script>
</head>
<body>
    <div>
        <table id="list2"></table>
        <div id="pager2" ></div>    
    </div>
</body>

извините за размещение здесь огромного кода.

1 Ответ

2 голосов
/ 15 марта 2012

Проблема существует, потому что ваши текущие данные не пустые . Ваши данные содержат "status": " " вместо "status": "". Если вы урежете данные перед использованием в jqGrid, проблема будет решена.

Несколько небольших дополнительных комментариев к вашему коду. Вы используете datatype: 'local', поэтому опция ajaxGridOptions: { cache: false } может быть удалена. Вы также можете удалить page: 1, что по умолчанию.

Вы используете $.jgrid.no_legacy_api = true, в неправильном был. Правильный путь будет

<script type="text/javascript" src="js/grid.locale-en.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

В случае $.jgrid.no_legacy_api будет установлено до jquery.jqGrid.min.js, но после grid.locale-en.js, что создает $.jgrid объект.

Дополнительно я бы порекомендовал вам определения mydata, jsonColModel и createGrid внутри $(function () {...});. Это уменьшит возможные конфликты имен с другими глобальными объектами из всех других скриптов Java, которые вы включили на страницу.

...