JQGrid 自定义排序-前端问题

JQGrid Custom Sorting(JQGrid 自定义排序)

本文介绍了JQGrid 自定义排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 JQGrid，其中填充了正常工作的数据.默认排序功能按预期工作.但是，我想按单击的列和按名称列排序；每次.我认为 onSortCol 是我应该开始的地方，但文档中没有太多关于如何对表格内容进行排序的内容.理想情况下，我希望不必编写自己的排序算法，只需以某种方式插入 JQGrid API.所有数据都在客户端上，如果可能的话，我希望避免访问服务器.

I have a JQGrid populated with data working correctly. The default sorting functionality is working as expected. However, I would like to sort by the clicked column, and the by a name column; every time. I think the onSortCol is where I should start, but there isn't much in the documentation about how to sort the contents of the table. Ideally, I would like to not have to write my own sorting algorithm and just plug into the JQGrid API somehow. All of the data is on the client and I would like to avoid a trip to the server if at all possible.

这是我用来创建网格的代码:

Here is the code I'm using to create the grid:

$jqGrid = $('#people_SelectedContacts').jqGrid({
    ajaxGridOptions: {
        type: "POST"
    },
    url: 'AJAX/GetContacts',
    datatype: "json",
    postData: JSON.stringify({ ID: $('#ID').val() }),
    loadonce: true,
    sortable: true,
    caption: "Selected Contacts",
    hidegrid: false,
    autowidth: true,
    rowNum: 10000,
    height: "100%",
    loadui: 'block',
    colNames: ['lecID', 'lrlID', 'mjID', 'Role', 'Name', 'Entity', 'Contact', 'D #', ''],
    colModel: [
        { name: 'LECID', hidden: true },
        { name: 'LRLID', hidden: true },
        { name: 'MJID', hidden: true },
        { name: 'RoleLookupName', index: 'RoleLookupName' },
        { name: 'FullName', index: 'FullName' },
        { name: 'Entity', index: 'Entity' },
        { name: 'ContactInformation', index: 'ContactInformation' },
        { name: 'DNumber', index: 'DNumber' },
        { name: 'Remove', sortable: false, width: 25 }
    ],
    jsonReader: {
        root: 'ReturnValues.Contacts',
        repeatitems: false
    },
    beforeProcessing: function (data, status, xhr) {
        if (!data.ReturnValues.Contacts) {
            data.ReturnValues.Contacts = new Array();
        }
        $.each(data.ReturnValues.Contacts, function (index, value) {
            value.Entity = FormatAddress(value);
            value.ContactInformation = FormatContact(value);
            value.DNumber = FormatDocket(value);
        });
    },
    gridComplete: function () {
        var ids = $jqGrid.jqGrid('getDataIDs');
        for (var i = 0; i < ids.length; i++) {
            removeButton = $('<span>').addClass('remove-contact jqui-button-fix');
            $jqGrid.jqGrid('setRowData', ids[i], { Remove: $('<div>').append(removeButton).html() });
        }
    },
    loadComplete: function (data) {

    },
    onSortCol: function (index, iCol, sortorder) {

    }
});

推荐答案

在您的网格中有 5 列可见且可排序:RoleLookupName"、FullName"、Entity"、ContactInformation"、DNumber".从服务器加载网格数据后，数据类型将从 'json' 更改为 'local' 对应于参数 loadonce: true.从现在开始，排序将在本地进行.因为您没有在任何列中定义 sorttype 属性将使用默认的 sorttype: 'text'.


In your grid you have 5 column which are visible and sortable: 'RoleLookupName', 'FullName', 'Entity', 'ContactInformation', 'DNumber'. After the loading of grid data from the server the datatype will be changed from 'json' to 'local' corresponds the behavior of the parameter loadonce: true. From now the sorting will be work locally. Because you don't define sorttype property in any column the default sorttype: 'text' will be used.
我如何理解RoleLookupName"、Entity"等列中的数据可能包含重复项，因此您希望通过主排序列(例如RoleLookupName")和第二列的组合对网格进行排序列(例如全名").在主排序列中存在重复项的情况下，网格仍将按第二列中的第二个条件进行排序.要实现该行为，您应该使用自定义排序.您可以通过使用 sorttype 作为函数来实现它(参见 答案).
How I understand the data in columns 'RoleLookupName', 'Entity' and so on can contain duplicates, so you would like to sort the grid by combination of the main sorting column (like 'RoleLookupName' for example) and the second column ('FullName' for example). In the case of duplicates in the main sorting column the grid will be still sorted by the second criteria from the second column. To implement the behavior you should use custom sorting. You can implement it by the usage of sorttype as function (see the answer).
sorttype 作为函数的想法很简单.sorttype 应该返回字符串或整数，应该使用  而不是 主单元格包含.例如，您可以将RoleLookupName"定义如下
The idea of sorttype as function is easy. The sorttype should return string or integer which should be used instead of  the main cell contain. For example you can define 'RoleLookupName' as following
{ name: 'RoleLookupName', index: 'RoleLookupName',
    sorttype: function (cell, obj) {
        return cell + '_' + obj.FullName;
    }}

另一个答案，其中包括demo 你能找到可能也有趣的理解.它展示了更高级的技术，不仅实现了自定义排序，还实现了自定义搜索.
Another answer which includes the demo could you find probably also interesting for understanding. It demonstrates even more advanced technique where it is implemented not only custom sorting, but also custom searching.

                        这篇关于JQGrid 自定义排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

问题描述

推荐答案

基础教程推荐