的jqGrid动态列和数据化JSON

Question

要创建动态数据和列格。 我问my question和阅读link但我需要更多的例子

Answer 1

在评论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}); 
});