Javascript 客户端 jqGrid 排序

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2131280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-22 22:52:19  来源:igfitidea点击:

jqGrid sorting on client side

javascriptjqueryajaxsortingjqgrid

提问by AlexA

I have a tree-grid with autoloading rows. The goal is to sort the grid by tree column, right on client side.

我有一个带有自动加载行的树形网格。目标是在客户端按树列对网格进行排序。

But each time I click on sort column header, it issuesan Ajax call for sorting, but all I need is on-place sorting using the local data.

但是每次我单击排序列标题时,它都会发出一个 Ajax 调用进行排序,但我所需要的只是使用本地数据进行就地排序。

Do I have incorrect grid parameters or doesn't tree work with client-side sorting on tree column?

我是否有不正确的网格参数或树不适用于树列上的客户端排序?

Current jqGrid params for sorting are are:

当前用于排序的 jqGrid 参数是:

loadonce: true, // to enable sorting on client side
sortable: true //to enable sorting

采纳答案by Justin Ethier

To get client-side sorting to work, I needed to call reloadGridafter the grid was loaded:

为了让客户端排序工作,我需要reloadGrid在加载网格后调用:

loadComplete: function() {
    jQuery("#myGridID").trigger("reloadGrid"); // Call to fix client-side sorting
}

I did not have to do this on another grid in my application because it was configured to use data retrieved via another AJAX call, instead of data retrieved directly by the grid:

我不必在我的应用程序中的另一个网格上执行此操作,因为它被配置为使用通过另一个 AJAX 调用检索的数据,而不是由网格直接检索的数据:

editurl: "clientArray"
datatype: "local"

回答by Stuntbeaver

I'm using client-side sorting on jqGrid and retrieving a new set of json data when a select list changes. You need to set rowTotal to an amount higher or equal to the number of rows returned, and then set the data type to 'json' just before reloading the grid.

我在 jqGrid 上使用客户端排序,并在选择列表更改时检索一组新的 json 数据。您需要将 rowTotal 设置为大于或等于返回行数的数量,然后在重新加载网格之前将数据类型设置为“json”。

// Select list value changed
$('#alertType').change(function () {
        var val = $('#alertType').val();
        var newurl = '/Data/GetGridData/' + val;
        $("#list").jqGrid().setGridParam({ url: newurl, datatype: 'json' }).trigger("reloadGrid");        
});

// jqGrid setup
$(function () {
        $("#list").jqGrid({
            url: '/Data/GetGridData/-1',
            datatype: 'json',
            rowTotal: 2000,
            autowidth: true,
            height:'500px',
            mtype: 'GET',
            loadonce: true,
            sortable:true,
            ...
            viewrecords: true,
            caption: 'Overview',
            jsonReader : { 
                root: "rows", 
                total: "total", 
                repeatitems: false, 
                id: "0"
            },
            loadtext: "Loading data...",
        });
    }); 

回答by ytkim

$(function () {
        $("#list").jqGrid({
            url: '/Data/GetGridData/-1',
            datatype: 'json',
            rowTotal: 2000,
            autowidth: true,
            height:'500px',
            mtype: 'GET',
            loadonce: true,
            sortable:true,
            ...
            viewrecords: true,
            caption: 'Overview',
            jsonReader : { 
                root: "rows", 
                total: "total", 
                repeatitems: false, 
                id: "0"
            },
            loadtext: "Loading data...",
        });
    });