Как сделать сортировку столбцов jqgrid?

Question

Столбцы не сортируются.

Я попытался изменить тип данных на локальный и добавить loadonce: true. Столбцы настроены для сортировки: true, и я попытался установить sorttype для строки и текста, но не работает. Я использую JQGrid версии 4.5.2.

var grid = jQuery("#AgencyQuotesGrid");
grid.jqGrid({
    url: '/Admin/QuotesGrid',
    altRows: true,
    altclass: 'myAltRowClass',
    autowidth: false,
    datatype: 'local',
    mtype: 'POST',
    colNames: ['Agency', 'Agency Name', 'Quote Number', 'Insured Name', 'Product', 'Status', 'Effective Date', 'Last Update'],
    colModel: [
        { name: 'AgencyCode', index: 'AgencyCode', width: 6, align: 'left', sortable: true, sorttype: 'string', stype: 'text', classes: 'defaultpointer' },
        { name: 'AgencyName', index: 'AgencyName', width: 11, align: 'left', sortable: true, classes: 'defaultpointer' },
        { name: 'QuoteCode', index: 'QuoteCode', width: 6, align: 'left', sortable: true, classes: 'defaultpointer' },
        { name: 'InsuredName', index: 'InsuredName', width: 11, align: 'left', sortable: true, classes: 'defaultpointer' },
        { name: 'PackageTypeCode', index: 'PackageTypeCode', width: 7, align: 'left', sortable: true, classes: 'defaultpointer' },
        { name: 'Status', index: 'Status', width: 3, align: 'left', formatter: changeToolTip, classes: 'defaultpointer' },
        { name: 'EffectiveDate', index: 'EffectiveDate', width: 7, align: 'left', classes: 'defaultpointer' },
        { name: 'UpadateDate', index: 'UpadateDate', width: 7, align: 'left', classes: 'defaultpointer'}],
    height: '100%',
    rowNum: 20,
    rowList: [20, 20, 50],
    sortname: "EffectiveDate",
    sortorder: "desc",
    viewrecords: true,
    imgpath: "../../Content/Images/",
    caption: '',
    loadonce: true,
    pager: "#AgencyQuotesPager",
    emptyrecords: "No quotes have been submitted",
    onSelectRow: function (ids) {
        $.cookie('lasttab', $('#subTabs').tabs('option', 'selected'), { expires: 1 });
        if (ids != null) {
            var data = $("#AgencyQuotesGrid").getRowData(ids);
            $("#AgencyQuotesGrid").trigger(window.location.href = '/Admin/QuoteRouter/?id=' + data.AgencyCode + '&code=' + data.QuoteCode + '&type=' + encodeURIComponent(data.PackageType))
        }
    },
    loadComplete: function () { $("#AgencyQuotesGrid").setGridWidth($('#AgencyQuotesContainer').width() - 40, true), $('.ui-jqgrid').css('font-size', 14); jQuery("#AgencyQuotesGrid").trigger("reloadGrid"); },
    onSortCol: function (index, columnIndex, sortOrder) {
        var col = $("#grid_summarygrid").getGridParam('colNames');
        var label = "Ordered by " + col[columnIndex] + " " + sortOrder + "ending";

        $("#gridsort").text(label);
    }
}).navGrid($('#AgencyQuotesPager'), { edit: false, add: false, del: false, search: true });
});

Я ожидаю сортировки столбцов, но это не так. Стрелки столбцов меняются, и сетка выскакивает "загрузка ...", но ничего не меняется. Я ценю любую помощь.

Answer 1

loadComplete запускается каждый раз при загрузке сетки, которая включает локальные загрузки, сортировку, разбиение на страницы и т. Д. Вы зарегистрировали обработчик событий, который затем сразу же перезагружает сетку (вызывая trigger("reloadGrid")), что приводит к ее очистке. и вернуться в исходное состояние. Удалите триггер reloadGrid, и он должен учитывать сортировку на стороне клиента.

loadComplete: function () {
    [...]
    jQuery("#AgencyQuotesGrid").trigger("reloadGrid");
}