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