работает сортировка в дереве jqgrid

Question

Я использую jqgrid treeview с бэкэндом asp.net-mvc и вижу, что GUI позволяет щелкать по другим столбцам для сортировки, но я не могу найти документацию или примеры того, как это реализовать.

Когда я щелкаю по заголовку столбца, появляется уведомление «Загрузка ...», но ни одно из моих действий на стороне сервера не вызывается.

Я использовал httpwatch и не вижу вызовов, пытающихся попасть на сервер..

Поддерживает ли jqgrid treeview сортировку (это будет просто сортировка верхнего уровня в дереве)?

Вот мой код:

$("#treegrid").jqGrid({
    url: '/MyController/GetData' + GetQuery(),
    datatype: 'json',
    footerrow: true,
    userDataOnFooter: true,
    mtype: 'GET',
    rowNum: 2000,
    colNames: ["ID", "Description", "Total 1"],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 1,
        hidden: true,
        key: true
    }, {
        name: 'desc',
        width: 240,
        index: 'desc',
        hidden: false,
        sortable: true
    },
            {
                name: 'total1',
                sorttype: 'int',
                index: 'total1',
                unformat: originalValueUnFormatter,
                formatter: bookMapFormatter,
                align: "right",
                width: 60,
                hidden: false,
                sortable: true
            }],
    treeGridModel: 'adjacency',
    height: 'auto',
    loadComplete: function (data) {


    },
    pager: "#ptreegrid",
    treeGrid: true,
    ExpandColumn: 'desc',
    ExpandColClick: true,
    caption: "My Treegrid"
});


 function bookMapFormatter(cellvalue, options, rowObject) {
     return booksFormatterEx(cellvalue, options, rowObject, "MyAction");
 }

function booksFormatterEx(cellvalue, options, rowObject, actionName) {
    var regularURL = '/MyController/' + actionName + GetQuery() + '&key=' + rowObject[0];
    return "<a target='_blank' href='" + regularURL + "' >" + cellvalue + "</a>";

}

Также, если это полезно, я сериализировал результаты json (используя класс .net JavascriptSerializer) (это просто представление верхнего уровня, когда я возвращаюсь на сервер, когда пользователи переходят вниз)

 {"page":1,
 "total":1,
 "records":2,
 "userdata":{"desc":"Total:","total1":"10,753"},
 "rows":[{
 "id":"Group1","cell":["Group1","1 - 1 System(s)",723, 0, null, false, false, true]},
 {"id":"Group2","cell":["Group2","2 - 2 System(s)",2120, 0, null, false, false, true]},
 {"id":"Group3","cell":["Group3","3 - 3 System(s)",2017, 0, null, false, false, true]},
 {"id":"Group4","cell":["Group4","4 - 4 System(s)",1181, 0, null, false, false, true]},
 {"id":"Group5","cell":["Group5","5 - 5 System(s)",4712, 0, null, false, false, true]}]}

Answer 1

Сетка дерева имеет SortTree метод, который будет использоваться для сортировки сетки локально . Не будет звонить на сервер. Если пользователь щелкнет заголовок столбца, будет вызван тот же метод.

Для лучшего понимания обращаю ваше внимание на одну строку из кода jqGrid:

if( ts.p.loadonce || ts.p.treeGrid) {ts.p.datatype = "local";}

, который будет выполнен в случае использования datatype: 'json' или datatype: 'json'. Таким образом, после первой загрузки Treegrid datatype будет изменено на datatype: 'local'.

Зависит от других данных jqGrid (loaded:true или loaded:false), расширение узла дерева будет происходить локально или запрос будет отправлен на сервер. В любом случае сортировка данных всегда будет осуществляться локально.

Единственное, что, если важно, иметь правильную сортировку: нужно использовать parent: "null" или parent: null в данных (не parent: "") для корневых узлов (подробности см. здесь ).

ОБНОВЛЕНО : В дополнение к проблеме с parent: "null" или parent: null (которой у вас нет в данных JSON) у вас есть проблема с использованием HTML внутри ответа JSON от сервера. Данные JSON, которые вы разместили, эквивалентны следующему:

{
    "page": 1,
    "total": 1,
    "records": 2,
    "userdata": {
        "desc": "Total:",
        "bookmapBooks": "10,753"
    },
    "rows": [
        {"id": "Group1", "cell": ["Group1", "<b>COMMODITIES</b> - 19  System(s)",         "<b>723</b>"]},
        {"id": "Group2", "cell": ["Group2", "<b>CREDIT</b> - 30 System(s)",               "<b>2,120</b>"]},
        {"id": "Group3", "cell": ["Group3", "<b>EQUITIES</b> - 23 System(s)",             "<b>2,017</b>"]},
        {"id": "Group4", "cell": ["Group4", "<b>MORTGAGE PRODUCTS</b> - 33 System(s)",    "<b>1,181</b>"]},
        {"id": "Group5", "cell": ["Group5", "<b>RATES AND CURRENCIES</b> - 40 System(s)", "<b>4,712</b>"]}
    ]
}

Как я описал ранее, datatype сетки будет изменен на 'local' после первой загрузки данных. Внутренний параметр data будет заполнен данными JSON точно в том же формате, что и во входных данных JSON. Таким образом, для столбца 'total1' вы бы имели такие данные, как "<b>723</b>" или "<b>4,712</b>", что соответствует , а не sorttype: 'int'. Таким образом, добавление "0", "null" для level: 0, parent: null не полностью решит проблему сортировки сетки. Строка "<b>4,712</b>" не может быть преобразована в int и поэтому не может быть отсортирована как целое число.

Еще одно маленькое замечание. Вы, вероятно, хотите использовать "userdata":{"desc":"Total:","total1":"10,753"} вместо "userdata":{"desc":"Total:","bookmapBooks":"10,753"}.

Что касается использования sorttype в качестве функции , вы можете решить вашу проблему и изменить исходную сетку

до сортируемая сетка

Вы можете использовать sorttype в следующей форме:

sorttype: function (val) {
    var strValue = $(val).text().replace(",",""); // replace thousandsSeparator
    return parseInt(strValue, 10);
}

Answer 2

Говоря из памяти, каждый раз, когда вы нажимаете на заголовок столбца, который ранее был настроен для сортировки в модели столбца, делается запрос по URL, который вы указали (также) в конфигурации.Четырьмя параметрами в запросе являются страница, строки, sidx и sord .

С этими значениями в параметрах у вас будет достаточно информации, чтобы гарантировать, что данные будут возвращены в том порядке (включая пейджинг), который вы хотите.