IT技术 - JQGrid 自定义排序 - 吾爱随笔录

JQGrid 自定义排序

IT技术 javascript jquery jqgrid

2021-02-16 20:51:57

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

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

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

    }
});

1个回答

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

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

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

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

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

不，我还没有。我确实知道定义sorttype为函数。我曾希望我能够使用onSortCol回调来做到这一点。但是，如果按照您建议的方式进行操作是唯一的方法，那么我想我只需要去做。感谢您提供我确定会有所帮助的代码。我希望今天晚些时候能解决这个问题，当它起作用时，我一定会标记你的答案。

2021-04-18 20:51:57

@Zero21xxx：顺便说一句，如果你打算奖励赏金，你必须明确地这样做。请参阅“我如何奖励赏金？” 在答案中。

2021-04-28 20:51:57

@Zero21xxx：不客气！这onSortCol有助于拒绝排序或在单击列标题时执行一些其他操作。定义应如何对数据进行排序，以便将某些成本排序行为定义为仅sorttype作为函数或index可以使用的函数。最好datatype: 'local'是sorttype作为一个函数。在我对您的问题的回答中引用的答案中，您会找到有关该主题的讨论的链接。

2021-05-15 20:51:57

其它你可能感兴趣的问题

上一篇使用 Javascript 在 textarea 中的光标处插入文本下一篇Flash 电影的 Div Z-Index 问题