javascript JQGrid 自定义排序

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7917321/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 01:42:36  来源:igfitidea点击:

JQGrid Custom Sorting

javascriptjqueryjqgrid

提问by arb

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 onSortColis 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.

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

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) {

    }
});

回答by Oleg

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 sorttypeproperty in any column the default sorttype: 'text'will be used.

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

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 sorttypeas function (see the answer).

我如何理解“RoleLookupName”、“Entity”等列中的数据可能包含重复项,因此您希望通过主排序列(例如“RoleLookupName”)和第二列(“全名'例如)。如果主排序列中有重复项,网格仍将按第二列中的第二个条件进行排序。要实现该行为,您应该使用自定义排序。您可以通过使用sorttypeas 函数来实现它(请参阅答案)。

The idea of sorttypeas function is easy. The sorttypeshould return string or integer which should be used instead ofthe main cell contain. For example you can define 'RoleLookupName' as following

sorttypeas 函数的想法很简单。在sorttype应该使用应该返回字符串或整数,而不是主细胞含有。例如,您可以如下定义“RoleLookupName”

{ name: 'RoleLookupName', index: 'RoleLookupName',
    sorttype: function (cell, obj) {
        return cell + '_' + obj.FullName;
    }}

Another answerwhich includes the democould 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.

包含演示的另一个答案可能对理解也很有趣。它展示了更高级的技术,不仅实现了自定义排序,还实现了自定义搜索。