多列排序-Jqgrid

Multiple column sorting - Jqgrid

本文关键字:-Jqgrid 排序      更新时间:2023-09-26

我正在尝试对Jqgrid上的多个列进行排序。。但它根本没有分类。我正在使用以下代码。

multiSort : true,sortname: 'orderNo asc, cd',sortorder: 'desc',

如何做到这一点?还有别的办法吗?

我也试过低于一个

 $('#OrderGrid').jqGrid('sortGrid', 'orderNo', true, 'asc')
 .jqGrid('sortGrid', 'cd', true, 'desc');

但现在运气还是不好。。。

要设置"desc"顺序,必须调用sortGrid两次

$('#OrderGrid').jqGrid('sortGrid', 'orderNo', true, 'asc')
    .jqGrid('sortGrid', 'cd', true, 'desc')
    .jqGrid('sortGrid', 'cd', true, 'desc');

例如,如果需要将orderNocd列的排序方向都设置为desc,则应使用

$('#OrderGrid').jqGrid('sortGrid', 'orderNo', true, 'desc')
    .jqGrid('sortGrid', 'orderNo', true, 'desc')
    .jqGrid('sortGrid', 'cd', true, 'desc')
    .jqGrid('sortGrid', 'cd', true, 'desc');

在调用sortGrid:之前,请确保将jqGrid的multiSort选项设置为true

$('#OrderGrid').jqGrid('setGridParam', {multiSort: true})
    .jqGrid('sortGrid', 'orderNo', true, 'asc')
    .jqGrid('sortGrid', 'cd', true, 'desc')
    .jqGrid('sortGrid', 'cd', true, 'desc');

或者,您也可以完全不使用sortGrid。演示演示了该方法。它使用以下代码

setSorting.call($grid[0], "name", "desc");
setSorting.call($grid[0], "invdate", "asc");
$grid.jqGrid("setGridParam", {
    multiSort: true,
    sortname: "name desc, invdate asc"
}).trigger("reloadGrid");

其中setSorting函数定义如下

var setSorting = function (colName, sortOrder) {
    var $self = $(this),
        colModel = $self.jqGrid("getGridParam", "colModel"),
        headers = $self[0].grid.headers,
        showSortIconsInAllCols = $self.jqGrid("getGridParam", "viewsortcols")[0],
        cmLength = colModel.length,
        cm,
        $sortSpan,
        i;
    for (i = 0; i < cmLength; i++) {
        cm = colModel[i];
        if (cm.name === colName) {
            cm.lso = String(sortOrder).toLowerCase() === "desc" ? "desc" : "asc";
        }
        $sortSpan = $(headers[i].el).find(">div.ui-jqgrid-sortable>span.s-ico");
        if (showSortIconsInAllCols || cm.lso) {
            $sortSpan.show();
            if (cm.lso) {
                $sortSpan.find(">span.ui-icon-" + cm.lso)
                    .removeClass("ui-state-disabled");
            }
        }
    }
};