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

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

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",    "[email protected]"]},
        {"id": "id2", "cell": ["Michael", "[email protected]"]}
    ]
}

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

enter image description here

(см. демо)

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

{
    "total": 1,
    "page": 1,
    "records": 2,
    "rows": [
        {"id": "id1", "cell": ["John",    "[email protected]"]},
        {"id": "id2", "cell": ["Michael", "[email protected]"]}
    ],
    "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]);
                }
            }
        }
    }
}

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

enter image description here

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