JQGrid установить заголовок и имя столбца

Question

У меня есть JQGrid с 2 столбцами, куда я попаду на сервер и получу некоторые данные, затем я объединю некоторые строки на основе фильтров на сервере и хочу установить это как заголовок, а также хочу изменить имена столбцов на основе этих фильтров. Есть ли способ установить заголовки и имена столбцов на основе ActionResult с сервера?

Answer 1

Мне интересен ваш вопрос.

Мы можем начать с простой сетки:

$("#list").jqGrid({
    url: 'ColumnNamesAndTitelFromServer.json',
    datatype: 'json',
    loadonce: true,
    colNames: ['Name', 'Email'],
    colModel: [
        {name: 'name', width: 100},
        {name: 'email', width: 150}
    ],
    rowNum: 5,
    rowList: [5, 10, 20],
    pager: '#pager',
    gridview: true,
    rownumbers: true,
    sortname: 'name',
    sortorder: 'asc',
    caption: 'Just simple local grid',
    height: 'auto'
});

и данные JSON:

{
    "total": 1,
    "page": 1,
    "records": 2,
    "rows": [
        {"id": "id1", "cell": ["John",    "john@example.com"]},
        {"id": "id2", "cell": ["Michael", "michael@example.com"]}
    ]
}

Мы получим следующие результаты

(см. демо )

Теперь мы расширим данные JSON нашей дополнительной информацией:

{
    "total": 1,
    "page": 1,
    "records": 2,
    "rows": [
        {"id": "id1", "cell": ["John",    "john@example.com"]},
        {"id": "id2", "cell": ["Michael", "michael@example.com"]}
    ],
    "userdata": {
        "title": "Das ist der Titel bestimmt beim Server",
        "columnNames": {
            "name": "Die Name",
            "email": "Die E-Mail"
        }
    }
}

В приведенном выше примере я просто определяю в userdata заголовок и имена столбцов сетки на немецком языке. Чтобы прочитать и использовать userdata, мы можем добавить следующий обработчик события loadComplete в сетку:

loadComplete: function () {
    var $grid = $(this), columnNames, name,
        userdata = $grid.jqGrid('getGridParam', 'userData');

    if (userdata) {
        if (userdata.title) {
            $grid.jqGrid('setCaption', userdata.title);
        }
        if (userdata.columnNames) {
            columnNames = userdata.columnNames;
            for (name in columnNames) {
                if (columnNames.hasOwnProperty(name)) {
                    $grid.jqGrid('setLabel', name, columnNames[name]);
                }
            }
        }
    }
}

Теперь та же сетка будет выглядеть как

(см. еще одно демо )