Данные на стороне клиента jqGrid исчезают при нажатии на столбцы сортировки - PullRequest
2 голосов
/ 09 ноября 2011

У меня есть jqGrid, где, если я нажимаю на заголовки для сортировки, все мои данные сетки исчезают, и я не знаю, почему это происходит.Вот пример страницы Я решил, что проблема в репро.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Disappearing Sort Repro</title>
    <link type="text/css" rel="Stylesheet" href="js/jQuery/plugins/jqGrid4/ui.jqgrid.css" />

</head>
<body>
    <table id="ooTruckGrid">
    </table>
    <div id="ooTruckPager">
    </div>
    <script language="javascript" type="text/javascript" src="js/jquery/jquery-1.6.2.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery/jquery-ui.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery/plugins/jqGrid4/grid.locale-en.js"></script>
    <script language="javascript" type="text/javascript" src="js/jQuery/plugins/jqGrid4/jquery.jqGrid.js"></script>
    <script language="javascript" type="text/javascript">
        _truckList = [];

        $(document).ready(function () {
            $("#ooTruckGrid").jqGrid({
                datatype: "clientSide",
                colNames: ['id', 'VIN', 'Plate', 'Make', 'Model', 'Year', 'RFID #', 'Description'],
                colModel: [
                    { name: 'id', index: 'id', hidden: true, sorttype: "int" },
                    { name: 'vin', index: 'vin', width: 120, sorttype: "text" },
                    { name: 'plate', index: 'plate', width: 75, sorttype: "text" },
                    { name: 'make', index: 'make', width: 80, sorttype: "text" },
                    { name: 'model', index: 'model', width: 80, sorttype: "text" },
                    { name: 'year', index: 'year', width: 40, sorttype: "int" },
                    { name: 'rfidNo', index: 'rfidNo', width: 50, sorttype: "text" },
                    { name: 'description', index: 'description', width: 100, sortable: false }
                ],
                datatype: 'local',
                hidegrid: false,
                jsonReader: {
                    repeatitems: false
                },
                loadonce: true,
                multiselect: true,
                pgbuttons: false,
                pginput: false,
                rowNum: '',
                pager: '#ooTruckPager',
                sortable: false,
                viewrecords: true
            });

            // Add truck         
            addTruckData(-1, 0, "11111111111111111", "Make 1", "Model 1-1", "2009", "US", "WA", "1D1D1D", "", "Test truck 1");
            addTruckData(-1, 0, "22222222222222222", "Make 2", "Model 2-1", "2010", "US", "WA", "2A2A2A", "11111", "Test truck 2");
            addTruckData(-1, 0, "33333333333333333", "Make 2", "Model 2-2", "2011", "US", "WA", "3B3B3B", "", "Test truck 3");
            addTruckData(-1, 0, "44444444444444444", "Make 1", "Model 1-2", "2006", "US", "WA", "4C4C4C", "22222", "Test truck 4");
            addTruckData(-1, 0, "55555555555555555", "Make 3", "Model 3-1", "2003", "US", "WA", "5E5E5E", "", "Test truck 5");
        });

        function addTruckData(rowId, id, vin, make, model, year, country, state,
            plate, rfid, description) {

            var rowId = -1;
            var method = '';

            var truck = new truckData(-1, // rowId 
            id, vin, make, model, year, country,
            state, plate, rfid, description);

            if (_truckList.length > 0) {
                for (var xx = 0; xx < _truckList.length; xx++) {
                    if (_truckList[xx].vin == vin) {
                        // The vin is already in the list, update it.
                        rowId = _truckList[xx].rowId;
                        break;
                    }
                }
            }

            if (rowId == -1 && _truckList.length == 0) {
                _truckList = [truck];
                rowId = 0;
                method = 'addRowData';
            }
            else if (rowId == -1) {
                rowId = _truckList.length;
                _truckList.push(truck);
                method = 'addRowData';
            }
            else {
                _truckList[rowId] = truck;
                method = 'setRowData';
            }

            truck.rowId = rowId;
            result = $('#ooTruckGrid').jqGrid(method, rowId, truck.toJqGridData());
        }

        function truckData(rowId, truckId, vin, make, model, year, country, state, plateNum, description, rfid, truckType) {
            return {
                rowId: rowId,
                id: truckId,
                vin: $.trim(vin),
                make: make,
                model: model,
                year: year,
                plateCountry: country,
                plateState: state,
                plateNumber: $.trim(plateNum),
                description: $.trim(description),
                rfid: $.trim(rfid),
                truckType: truckType,
                toJqGridData: function () {
                    return { "id": this.id, 'action': '', 'vin': this.vin,
                        'plate': this.plateCountry + '-' + this.plateState + '-' +
                        this.plateNumber, 'make': this.make, 'model': this.model,
                        'year': this.year, 'rfidNo': this.rfid,
                        'description': this.description
                    };
                }
            };
        }
    </script>
</body>
</html>

Если вы перейдете по этой ссылке и нажмете один из заголовков, все данные исчезнут, а несортировка сетки.

Ответы [ 2 ]

6 голосов
/ 10 ноября 2011

Ошибка, которая приводит к исчезновению данных при сортировке столбца, это опция rowNum: ''. Если вам не нужна подкачка данных, вы должны установить достаточно большое значение для rowNum, например rowNum: 10000. Такое изменение решит вашу главную проблему.

В вашем коде много других мелких ошибок или плохо написанных частей, о которых я хочу упомянуть:

  • Ваша тестовая страница не включает jquery-ui.css, что действительно важно . С другой стороны вы включаете jquery-ui.js, который не нужен для jqGrid. Вы должны включать его, только если вы используете некоторые функции пользовательского интерфейса jQuery.
  • Функция addTruckData содержит параметр rowId, но вы определяете локальную переменную с тем же именем и присваиваете значение var rowId = -1 позже в коде. Это неправильно, конечно.
  • Вы должны включить <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> в заголовок страницы.
  • Вы должны удалить устаревший language="javascript" атрибут <script>.
  • Если вы хотите иметь правильную переходную страницу XHTML 1.0, вы должны включить пустую ячейку <tr><td/></tr> внутри элемента <table>. Пустая ячейка будет удалена во время инициализации jqGrid.
  • В коде JavaScript используются символы < и &. Таким образом, чтобы получить правильный код XHTML, вы должны изменить код или просто включить строку //<![CDATA[ в начале скрипта и строку //]]> в его конце.
  • Вы должны следовать стандартам JavaScript для классов и удалить функцию от truckData до TruckData.
  • Вы должны использовать как можно меньшую глобальную переменную и глобальные функции. Например, функции TruckData и addTruckData, такие как переменная _truckList (лучше truckList), могут быть перемещены внутри $(document).ready(function () {/*here*/});
  • Вы должны определить переменные, прежде чем использовать их там. Например, вы используете result без определения. В случае result будет интерпретироваться как глобальная переменная и будет добавлено как свойство к объекту windows.
  • Вы используете datatype: "clientSide" и datatype: 'local' в одной сетке. Вы должны удалить datatype: "clientSide".
  • Вы должны удалить loadonce: true, потому что в случае datatype: 'local' это не имеет смысла и будет проигнорировано.
  • Вы должны удалить свойства colModel , которые по умолчанию похожи на sorttype: "text", и удалить параметры jqGrid , которые также по умолчанию, как sortable: false. С другой стороны, вы можете включить height: 'auto' параметр.
  • Я рекомендую вам использовать JSLint для улучшения качества вашего кода JavaScript и использовать W3 validator для проверки разметки HTML.

Я изменил вашу страницу один раз, чтобы показать, как можно сделать вышеуказанные изменения. Демоверсия здесь не содержит ошибок валидатора JSLint или W3.

0 голосов
/ 12 апреля 2016

добавьте следующую строку в область создания jqgrid:

rowNum: 9007199254740992

устанавливает максимальную емкость для строк в jqgrid

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