jqgriddynamic列和数据由json

我了解了jqgrid。我想通过dynamic数据和列创build网格。 我问我的问题，并阅读这个链接，但我需要更多的例子

Answer 1

在对我之前答复的回答中，我简要介绍了如何根据从服务器返回的数据更改列标题的想法。 为了让我更清楚，我为你准备了一个演示。

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

• 在服务器的不同响应中，列数没有改变
• 格式化程序和列的width将不会在服务器的不同响应中更改。

所有的限制可以减less或删除，但在你的情况下，上述限制是泛滥的。 另外我想先说明实施的主要思想。

演示在网格上方有树形button，允许从服务器重新载入数据，但是从不同的URL重新载入数据。 点击“加载俄罗斯标题”button后，网格上的标题将被服务器响应中的文本dynamic地改变，并且会看到下面的图片

数据格式如下：

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