如何使jqgrid列排序?

时间:2019-07-06 01:14:45

标签: javascript jquery jqgrid

这些列不排序。

我尝试将数据类型更改为local并添加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 });
});

我希望这些列能够排序,但事实并非如此。列箭头更改,并且网格弹出“正在加载...”,但没有任何变化。感谢您的帮助。

1 个答案:

答案 0 :(得分:2)

每次网格加载时都会触发

loadComplete,包括局部加载,排序,分页等。您注册了一个事件处理程序,然后立即重新加载网格(通过调用trigger("reloadGrid")),这导致网格以清除自身并恢复其初始状态。删除reloadGrid触发器,它应遵守客户端排序。

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