jqgrid динамические столбцы и данные от json

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