JQGrid设置标题和列名

Leo*_*ell 6 jqgrid

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

Ole*_*leg 13

我觉得你的问题很有意思.

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

$("#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'
});
Run Code Online (Sandbox Code Playgroud)

和JSON数据:

{
    "total": 1,
    "page": 1,
    "records": 2,
    "rows": [
        {"id": "id1", "cell": ["John",    "john@example.com"]},
        {"id": "id2", "cell": ["Michael", "michael@example.com"]}
    ]
}
Run Code Online (Sandbox Code Playgroud)

我们将收到以下结果

在此输入图像描述

(见演示)

现在我们使用我们的自定义附加信息扩展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"
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

在上面的例子中,我只是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]);
                }
            }
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

现在相同的网格看起来像

在此输入图像描述

(见另一个演示)