javascript – JQGrid自定义排序

2019-06-10 03:26:01 阅读：310 来源： 互联网

我有一个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) {

    }
});

解决方法:

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

我如何理解列’RoleLookupName’,’Entity’等中的数据可以包含重复项,因此您希望通过组合主排序列(例如’RoleLookupName’)和第二列(‘ FullName’例如).如果主排序列中有重复项,则网格仍将按第二列中的第二个标准排序.要实现该行为,您应该使用自定义排序.您可以通过使用sorttype作为函数来实现它(参见the answer).

sorttype作为函数的想法很容易. sorttype应该返回应该使用的字符串或整数,而不是主单元格所包含的.例如,您可以将“RoleLookupName”定义如下

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

包括the demo在内的Another answer你能找到可能也很有趣的理解.它演示了更高级的技术,它不仅实现了自定义排序,还实现了自定义搜索.

标签：jquery,javascript,jqgrid
来源： https://codeday.me/bug/20190610/1209365.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – JQGrid自定义排序