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

Question

Это вопрос, который, я знаю, задавался здесь и в нескольких других местах в Интернете. Я попробовал все решения, которые смог найти на сайте StackOverflow, с тем же результатом, но ничего не решило мою проблему.

Я хочу загрузить данные из базы данных один раз, а затем выполнить все операции сортировки на клиенте. Свойство loadonce звучит так, как будто оно должно справиться с этим, но, похоже, оно не работает для меня. Я также попытался установить тип данных как локальный в различных обработчиках событий, но безуспешно.

Вот код, который я использую для создания сетки.

        $('#people_SelectedContacts').jqGrid({
        ajaxGridOptions:{
            type: "POST"
        },
        datatype: function(data){
            $.ajax(klg.getAppRoot()+"AJAX/GetMatterProfileContacts",{
                            data: JSON.stringify({
                MatterProfileID: $('#MatterProfileID').val()
            }),
            success: function(data){
                var contacts = data.ReturnValues;
                var mygrid = $("#people_SelectedContacts")[0];
                mygrid.addJSONData(contacts);
            },
            complete: function(){
                $("#people_SelectedContacts").setGridParam({datatype:'local'});
            }});
        },
        loadonce: true,
        colNames:['lecID','lrlID','mjID','Role','Name','Company/Court', 'Business Phone', 'Email', 'Docket #'],
        colModel:[
            {name:'LegalEntityContactID', hidden:true},
            {name:'LegalRoleLookupID', hidden:true},
            {name:'MatterJurisdictionID', hidden:true},
            {name:'LegalRoleLookupName', index:'legalrole'},
            {name:'FullName',index:'name'},
            {name:'Company',index:'company'},
            {name:'BusinessPhone',index:'bussphone'},
            {name:'Email',index:'email'},
            {name:'DocketNumber',index:'email'}
        ],
        sortable: true,
        jsonReader: {
            root:'MatterProfileContacts',
            repeatitems: false,
            id:"MatterProfileContactID"
        }
    });

Данные загружаются в сетку правильно, но, как я уже сказал, все команды сортировки идут и снова попадают на сервер. Кто-нибудь может направить меня в правильном направлении? Единственная причина, по которой я перешел со стандартной таблицы HTML на JQGrid - это сортировка и группировка. Если я не могу заставить работать на стороне клиента сортировку, это бесполезно.

Спасибо, сообщество Stack Overflow.

Answer 1

Причина вашей проблемы в том, что вы используете datatype как функцию, которая не нужна в 99,9% случаев. Проблема в том, что установка datatype: 'local' - не единственное, что делает jqGrid в случае loadonce: true. Самое главное, что параметры data и _index будут заполнены данными, возвращаемыми с сервера. Внутренние параметры содержат данные и будут использоваться во время локальной сортировки и подкачки. Ваша текущая реализация не заполняет data и _index, поэтому loadonce: true не может работать.

Вместо использования datatype в качестве функции вы можете использовать

datatype: 'json',
serializeGridData: function (data) { return JSON.stringify(data); },
postData: { MatterProfileID: function () { return $('#MatterProfileID').val(); } }

Вы должны дополнительно изменить jsonReader, чтобы включить ReturnValues в root. Я думаю, что после изменений вы сможете использовать loadonce: true. Возможно, есть некоторые другие мелкие вещи, которые вам нужно сделать дополнительно, но самое важное, что вы должны использовать любой стандарт datatype вместо datatype в качестве функции.

Answer 2

Я изменил сетку, чтобы использовать тип данных: 'json', как вы предложили Олегом.У меня все еще была проблема сортировки, но я понял, что это из-за значений index, которые я использовал в модели столбцов.index значения модели столбца должны соответствовать именам свойств объектов JSON, возвращаемых с сервера.