Сортировка jqGrid на стороне клиента

Question

У меня есть сетка деревьев с автозагрузкой строк. Цель состоит в том, чтобы отсортировать сетку по столбцу дерева, прямо на стороне клиента.

Но каждый раз, когда я нажимаю на заголовок столбца сортировки, он вызывает Ajax-вызов для сортировки, но все, что мне нужно, это сортировка на месте с использованием локальных данных.

У меня неправильные параметры сетки или дерево не работает с сортировкой на стороне клиента по столбцу дерева?

Текущие параметры jqGrid для сортировки:

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

Answer 1

Чтобы заставить работать на стороне клиента, мне нужно было позвонить reloadGrid после загрузки сетки:

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

Мне не нужно было делать это на другой сетке в моем приложении, потому что оно было сконфигурировано для использования данных, полученных с помощью другого вызова AJAX, вместо данных, полученных непосредственно с помощью сетки:

editurl: "clientArray"
datatype: "local"

Answer 2

Я использую клиентскую сортировку на 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...",
        });
    }); 

Answer 3

$(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...",
        });
    });