对您先前回答的我的回答的评论我简短地介绍了如何根据服务器返回的数据更改列标题的想法.为了更清楚一点，我为您准备了一个演示.

In comments to my answer on your previous answer I described shortly the idea how you can change the column headers based on the data returned from the server. To make all more clear I prepared a demo for you.

我试图使演示大部分简短明了，因此它有一些限制:

I tried to make the demo mostly short and clear, so it has some restrictions:

• 在服务器的不同响应中未更改的列数
• 格式化程序和列的width不会在服务器的不同响应中更改.

• number of columns not changed in different responses from the server
• the formatters and the width of the column will be not changed in different responses from the server.

所有限制都可以减少或删除，但是您必须遵守上述限制.此外，我想首先描述实现的主要思想.

All the restrictions can be reduced or removed, but in your case the above restrictions are suffused. Moreover I wanted first describe the main idea of the implementation.

该演示在网格上方具有树状按钮，可用于从服务器，但从不同的URL重新加载数据.单击加载俄语标题"按钮后，网格中的标题将随着服务器响应中的文本而动态更改，并且将看到下图

The demo has tree buttons above the grid which allows to reload data from the server, but from different URLs. After clicking on "Load Russian headers" button the headers on the grid will be dynamically changed with the texts from the server response and one will see the following picture

数据格式如下:

{
    "model": {
        "c1": { "label": "Client" },
        "c2": { "label": "Date" },
        "c3": { "label": "Amount" },
        "c4": { "label": "Tax" },
        "c5": { "label": "Total" },
        "c6": { "label": "Paid" },
        "c7": { "label": "Shipped via" },
        "c8": { "label": "Notes" }
    },
    "data": [
        {"id": "10",  "cell": ["test",   "2007-10-01", "200.00", "10.00", "210.00", "true",  "TN", "note"  ] },
        {"id": "20",  "cell": ["test2",  "2007-10-02", "300.00", "20.00", "320.00", "false", "FE", "note2" ] },
        {"id": "30",  "cell": ["test3",  "2007-09-01", "400.00", "30.00", "430.00", "false", "FE", "note3" ] },
        {"id": "40",  "cell": ["test4",  "2007-10-04", "200.00", "10.00", "210.00", "true",  "TN", "note4" ] },
        {"id": "50",  "cell": ["test5",  "2007-10-31", "300.00", "20.00", "320.00", "false", "FE", "note5" ] },
        {"id": "60",  "cell": ["test6",  "2007-09-06", "400.00", "30.00", "430.00", "false", "FE", "note6" ] },
        {"id": "70",  "cell": ["test7",  "2007-10-04", "200.00", "10.00", "210.00", "true",  "TN", "note7" ] },
        {"id": "80",  "cell": ["test8",  "2007-10-03", "300.00", "20.00", "320.00", "false", "FE", "note8" ] },
        {"id": "90",  "cell": ["test9",  "2007-09-01", "400.00", "30.00", "430.00", "false", "TN", "note9" ] },
        {"id": "100", "cell": ["test10", "2007-09-08", "500.00", "30.00", "530.00", "true",  "TN", "note10"] },
        {"id": "110", "cell": ["test11", "2007-09-08", "500.00", "30.00", "530.00", "false", "FE", "note11"] },
        {"id": "120", "cell": ["test12", "2007-09-10", "500.00", "30.00", "530.00", "false", "FE", "note12"] }
    ]
}

JavaScript代码最重要的部分是

The most important part of the JavaScript code is

jsonReader: { root: "data" },
beforeProcessing: function (data) {
    var $self = $(this), model = data.model, name, $colHeader, $sortingIcons;
    if (model) {
        for (name in model) {
            if (model.hasOwnProperty(name)) {
                $colHeader = $("#jqgh_" + $.jgrid.jqID(this.id + "_" + name));
                $sortingIcons = $colHeader.find(">span.s-ico");
                $colHeader.text(model[name].label);
                $colHeader.append($sortingIcons);
            }
        }
    }
}

演示中使用的完整JavaScript如下

Full JavaScript used in the demo is below

var $grid = $("#list");
$grid.jqGrid({
    url: "DynamicHeaderProperties.json",
    datatype: "json",
    colModel: [
        { name: "c1", width: 70 },
        { name: "c2", width: 80, align: "center", sorttype: "date",
            formatter: "date", formatoptions: {newformat: "m/d/Y"}, datefmt: "m/d/Y"},
        { name: "c3", width: 70, formatter: "number", align: "right",
            editrules: {required: true, number: true}, editable: true},
        { name: "c4", width: 60, formatter:"number", align: "right", editable: true,
            editrules:{required: true, number: true}},
        { name: "c5", width: 110, formatter: "number", align:"right",
            editrules:{required:true,number: true}, editable: true},
        { name: "c6", width: 80, align: "center", editable: true,
            formatter:"checkbox",edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"}},
        { name: "c7", width: 110, align: "center", formatter: "select", editable: true,
            edittype: "select", editoptions: {value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "Intime"}},
        { name: "c8", width: 90, sortable: false, editable:true}
    ],
    rowNum: 10,
    rowList: [5,10,20],
    pager: "#pager",
    gridview: true,
    rownumbers: true,
    sortname: "c2",
    viewrecords: true,
    sortorder: "desc",
    caption: "Setting coloumn headers dynamicaly",
    jsonReader: { root: "data" },
    beforeProcessing: function (data) {
        var $self = $(this), model = data.model, name, $colHeader, $sortingIcons;
        if (model) {
            for (name in model) {
                if (model.hasOwnProperty(name)) {
                    $colHeader = $("#jqgh_" + $.jgrid.jqID(this.id + "_" + name));
                    $sortingIcons = $colHeader.find(">span.s-ico");
                    $colHeader.text(model[name].label);
                    $colHeader.append($sortingIcons);
                }
            }
        }
    },
    loadonce: true,
    height: "auto"
});
$("#en").button().click(function () {
    $grid.jqGrid("setGridParam", {
        datatype: "json",
        url: "DynamicHeaderProperties.json",
    }).trigger("reloadGrid", {current: true});
});
$("#ru").button().click(function () {
    $grid.jqGrid("setGridParam", {
        datatype: "json",
        url: "DynamicHeaderPropertiesRu.json",
    }).trigger("reloadGrid", {current: true});
});
$("#de").button().click(function () {
    $grid.jqGrid("setGridParam", {
        datatype: "json",
        url: "DynamicHeaderPropertiesDe.json",
    }).trigger("reloadGrid", {current: true});
});