jqGrid 排序功能的问题

Question

我正在使用 jgGrid 绑定从 Web 服务接收到的 JSON 响应。 我在排序功能方面面临 2 个问题-

1.网格中的数据最初没有使用提供的参数进行排序-

sortname: "BankName",
sortorder: "asc",

2.列上不显示排序图标。点击列标题都不适合我。

收到的 JSON 数据：

[{"Id":1,"BankId":2,"BankName":"State bank","EmployeeId":2539,"EmployeeName":"John C.","JoiningDate":"2005-07-05T00:00:00","SalaryAmount":50000.0,"Comments":""},
{"Id":2,"BankId":2,"BankName":"State bank","EmployeeId":2232,"EmployeeName":"xxx","JoiningDate":"2001-12-23T00:00:00","SalaryAmount":30000.0,"Comments":"test"},
{"Id":3,"BankId":4,"BankName":"National bank","EmployeeId":2322,"EmployeeName":"yyyy","JoiningDate":"2002-09-23T00:00:00","SalaryAmount":90000.0,"Comments":""},
{"Id":4,"BankId":3,"BankName":"Punjab bank","EmployeeId":2432,"EmployeeName":"ppp","JoiningDate":"2003-01-31T00:00:00","SalaryAmount":60000.0,"Comments":" "},
{"Id":5,"BankId":1,"BankName":"Bank of Maharashtra","EmployeeId":2892,"EmployeeName":"zzz y.","JoiningDate":"2000-10-11T00:00:00","SalaryAmount":80000.0,"Comments":"test 2"}
]

jqGrid 声明和绑定：

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#employeeSalarysGrid").jqGrid({
            height: 250,
            url: 'http://localhost:50570/api/Test/GetEmployeeSalaries',
            mtype: "GET",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            serializeGridData: function (postData) {
                return JSON.stringify(postData);
            },
            jsonReader: {
                root: function (obj) { return obj; },
                page: function (obj) { return 1; },
                total: function (obj) { return 1; },
                records: function (obj) { return obj.length; },
                id: "0",
                cell: "",
                repeatitems: false
            },
            datatype: "json",
            colNames: ['Id', 'Bank Name', 'Employee name', 'Joining date', 'Salary amount', 'Comments'],
            colModel: [
            { name: 'Id', index: 'Id', align: "center", key: true },
            { name: 'BankName', index: 'BankName', align: "center" },
            { name: 'EmployeeName', index: 'EmployeeName', align: "center" },
            { name: 'JoiningDate', index: 'JoiningDate', align: "center" },
            { name: 'SalaryAmount', index: 'SalaryAmount', align: "center" },
            { name: 'Comments ', index: 'Comments', align: "center" }
            ],
            sortname: "BankName",
            sortorder: "asc",
            viewrecords: true,
            rowNum: 10,
            rowList: [10, 15, 20],
            pager: '#employeeSalarysPager',
            caption: "Employee Salary list"
        });
    });
</script>

另外请注意，这些是我添加到页面的 5 个文件：

<link href="../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="../Content/jquery.jqGrid/jquery-ui-custom.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script src="../Scripts/jquery.jqGrid.js"></script>
<script src="../Scripts/i18n/grid.locale-en.js"></script>

请帮我弄清楚为什么排序不起作用。

在此先感谢您，非常感谢您对此提供的帮助。

问候，

阿比拉什

Answer 1

如果您使用datatype: "json"，则服务器从sortname: "BankName" 和sortorder: "asc" 选项中获取参数，如sidx（排序索引）和sord（排序方向）。所以服务器负责至少初始返回数据的排序。

我建议您添加loadonce: true 选项，这意味着您一次从服务器加载所有数据（不仅仅是 10 行数据，请参阅rowNum: 10 选项）而不实现服务器端数据分页。所以服务器只需要对数据进行initial排序。 jqGrid 会将所有数据保存在内部参数data 和_index 中。在第一次加载数据后，它还会将datatype 从"json" 更改为"local"。因此，以后所有的数据分页、排序、过滤（参见filterToolbar）或搜索（参见here 或here）都将在客户端上实现。因此，您需要编写最少的 JavaScript 代码才能拥有所需的功能。

另外我建议您从 URL 中删除 http://localhost:50570 前缀，从 colModel 的所有项目中删除 index 属性，添加 gridview: true 和 autoencode: true 选项并考虑使用 ignoreCase: true 和 height: "auto" （而不是您当前使用的height: 250）。

我建议您验证您使用的是当前版本的 jqGrid（版本 4.6.0）。您可以从trirand 站点下载当前版本。