1
要創建動態數據和列格。 我問my question和閱讀link但我需要更多的例子的jqGrid動態列和數據化JSON
要創建動態數據和列格。 我問my question和閱讀link但我需要更多的例子的jqGrid動態列和數據化JSON
在評論my answer在我簡短地描述這個想法如何更改基於數據的列標題從服務器返回你以前的答案。爲了讓我更清楚,我爲你準備了一個演示。
我試圖讓演示大多簡短清晰,所以它有一些限制:
width
會不會因服務器的不同響應而改變。所有的限制可以減少或刪除,但在你的情況下,上述限制是氾濫的。此外,我想首先描述實施的主要思想。
The demo具有樹按鈕,其允許從服務器重新加載數據的網格上方,但是從不同的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});
});
非常感謝。你的例子幫助我理解:-) – ZSH 2013-05-01 05:13:04
@ZSH:不客氣! – Oleg 2013-05-01 09:03:20
我們可以在這裏執行分頁嗎? – user1926138 2017-01-10 11:20:55