为什么 jqgrid 排序不起作用？答案

【问题标题】：Why does jqgrid sorting is not wokring?为什么 jqgrid 排序不起作用？
【发布时间】：2019-03-20 10:29:53
【问题描述】：

这是我的代码，我正在尝试使用 data.json 中添加的数据填充网格，默认排序应该添加到 jqgrid 中，但不会发生。我在 data.json 中给出了数据，这些数据将填充到网格中。分页有效，但排序无效。

<!DOCTYPE html>

<html lang="en">
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script src="js/jqgrid/jquery-1.11.0.min.js" type="text/javascript"></script>
        <script src="js/jqgrid/jquery-ui.min.js" type="text/javascript"></script>
        <script src="js/jqgrid/jquery-ui-1.12.1.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
        <script src="js/jqgrid/jqgridscreen-min.js" type="text/javascript"></script>
        <script src="js/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
        <script src="js/jqgrid/jquery.jqGrid.src.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="css/jqgrid/ui.jqgrid.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/jqgrid/ui.multiselect.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/jqgrid/custom.css" />

        <meta charset="utf-8" />
        <title>jqGrid Loading Data - JSON</title>
    </head>
    <body>

        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>

        <script type="text/javascript"> 

            $(document).ready(function () {
                $("#jqGrid").jqGrid({
                    url: 'data.json',
                    datatype: "json",
                    colModel: [
                        { label: 'Category Name', name: 'CategoryName', width: 75, sorttype:'string' },
                        { label: 'Product Name', name: 'ProductName', width: 90, sorttype:'string' },
                        { label: 'Country', name: 'Country', width: 100, sorttype:'string'},
                        { label: 'Price', name: 'Price', width: 80, sorttype:'float' },
                        { label: 'Quantity', name: 'Quantity', width: 80, sorttype:'integer' }                   
                    ],
                    loadonce: true,
                    gridview: true,
                    autoencode: true,
                    width: 780,
                    height: 200,
                    rowNum: 15,
                    viewrecords: true,
                    pager: "#jqGridPager",
                    loadComplete: function () {
                        var $self = $(this);
                        if ($self.jqGrid("getGridParam", "datatype") === "json") {
                            setTimeout(function () {
                                $self.trigger("reloadGrid"); // Call to fix client-side sorting
                            }, 50);
                        }
                    }

                });
            });

        </script>
    </body>
</html>

什么是错误，为什么没有排序？

【问题讨论】：

您使用（可以使用）jqGrid 的哪个版本以及 jqGrid 的哪个 fork（free jqGrid，商业 Guriddo jqGrid JS 或旧版本jqGrid 版本 jquery.jqGrid.min.js 或 jquery.jqGrid.src.js）。
顺便说一句，如果你使用 free jqGrid fork，那么你可以删除你当前的loadComplete 并添加forceClientSorting: true 选项。该选项仅与loadonce: true 结合使用。它允许在从服务器加载后直接在本地对数据进行排序和过滤。请参阅the old answer 的 UPDATE 部分
不客气！我发布了与答案相同的信息。如果您将"accept" 回答，您将获得您的第一个声望点。

标签： javascript jquery jqgrid

【解决方案1】：

如果您使用free jqGrid fork，则可以删除当前的loadComplete 并添加forceClientSorting: true 选项。该选项仅与loadonce: true 结合使用。它允许在从服务器加载后直接在本地对数据进行排序和过滤。参见the old answer的UPDATE部分

【讨论】：