JQGrid设置标题和列名

时间:2011-09-05 18:52:48

标签: jqgrid

我有一个JQGrid,其中有两列我将到达服务器并获取一些数据,然后我将根据服务器上的过滤器连接一些字符串,并希望将其设置为标题并且还要更改列名称基于那些过滤器。 有没有办法根据服务器的ActionResult设置标题和列名?

1 个答案:

答案 0 :(得分:12)

我发现你的问题很有趣。

我们可以从简单的网格开始:

$("#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"]}
    ]
}

我们将收到以下结果

enter image description here

(见the demo

现在我们使用自定义附加信息扩展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]);
                }
            }
        }
    }
}

现在相同的网格看起来像

enter image description here

(见another demo