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>

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

先谢谢，我真的很感谢你的帮助。

此致

Abhilash

Answer 1

如果您使用datatype: "json"，那么服务器会将选项sortname: "BankName"和sortorder: "asc"中的参数作为sidx（排序索引）和{{ 1}}（排序方向）。所以服务器负责至少对返回数据进行初始排序。

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

其他我建议您从网址中删除"local"前缀，从http://localhost:50570的所有项目中移除index个属性，添加colModel和gridview: true选项，考虑使用autoencode: true和ignoreCase: true（而不是您当前使用的height: "auto"）。

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

jqGrid排序功能的问题

1 个答案: