Question

我有一个jqGrid，如果我点击标题进行排序，我的所有网格数据都会消失，我不知道为什么会这样。这是一个sample page我做了这个问题。

<!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>

如果您转到该链接，然后单击其中一个标题，则所有数据都会消失，而不是排序网格。

Answer 1

产生列排序数据消失的错误是选项rowNum: ''。如果您不需要分页数据，则应为rowNum rowNum: 10000设置一些足够大的值。这种改变将解决您的主要问题。

您的代码还有许多其他小错误或错误的书面部分，我想提一下：

您的测试页面不包含非常重要的jquery-ui.css 。另一方面，你包括jqGrid不需要的jquery-ui.js。只有在使用某些jQuery UI功能时才应包含它。
addTruckData函数包含rowId参数，但您可以使用相同的名称定义局部变量，并在代码中稍后指定值var rowId = -1。这当然是错的。
您应在页眉中添加<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />。
您应删除language="javascript"。

<script>

如果您想拥有正确的XHTML 1.0 Transitional页面，则应在<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'它没有任何意义，将会被忽略。
您应删除默认为sorttype: "text"的{{3}}属性，并移除colModel，这些属性也默认为sortable: false。另一方面，您可以考虑包含height: 'auto'参数。
我建议您使用jqGrid options来提高JavaScript代码的质量，并使用JSLint来验证HTML标记。

我修改了您的网页一次，以显示如何进行上述更改。演示W3 validator没有JSLint或W3验证器错误。

Answer 2

在jqgrid创建范围中添加以下行：

rowNum: 9007199254740992

这设置了jqgrid

中行的最大容量

单击排序列时，jqGrid客户端数据消失

2 个答案: