如何使 jqgrid 列排序？

Question

列不排序。

我尝试将数据类型更改为本地并添加 loadonce: true。列设置为 sortable: 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");
}