jqgrid - json的jqgrid动态列和数据

Question

我新了解了 jqgrid。我想通过动态数据和列创建网格。我问了我的问题并阅读了此链接，但我需要更多示例

Answer 1

在对我对您先前答案的回答的评论中，我简要描述了如何根据从服务器返回的数据更改列标题的想法。为了更清楚，我为你准备了一个演示。

我试图使演示大多简短明了，所以它有一些限制：

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

所有限制都可以减少或删除，但在您的情况下，上述限制泛滥。此外，我想首先描述实现的主要思想。

该演示在网格上方有树形按钮，允许从服务器重新加载数据，但来自不同的 URL。单击“加载俄罗斯标题”按钮后，网格上的标题将随服务器响应中的文本动态更改，您将看到以下图片

数据格式如下：

{
    "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 代码中最重要的部分是

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 如下

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});
});