时间戳

首页 > 解决方案 > 为什么 jqgrid 排序不工作？

javascript - 为什么 jqgrid 排序不工作？

问题描述

这是我的代码，我正在尝试使用 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>

错误是什么，为什么不进行排序？

标签： javascriptjqueryjqgrid

解决方案

如果您使用免费的 jqGrid fork，那么您可以删除当前的loadComplete并添加forceClientSorting: true选项。该选项仅与 结合使用loadonce: true。它允许在从服务器加载后直接在本地对数据进行排序和过滤。请参阅旧答案的更新部分

推荐阅读