使用动态列绑定显示jqgrid时出现问题

我试图从struts操作中传递colModel和columns。就像问题里说的一样

我不确定我错过了什么。请帮忙。花了相当长的时间试图把它弄对

jsp:

谢谢。

在我的测试中成功了。尽管如此，因为您的问题对许多jqGrid用户来说很有趣，所以我想在您的代码和JSON数据中为您编写一些小错误和优化

第一个也是最重要的问题是项目的ID。

jsonReader

内部的设置

id:“0”

错误。仅当数据项是数组而不是具有命名属性的对象（

repeatitems:false

）时，才可以使用它。当前作为行的ID将使用整数1,2，。。。我严格建议您在JSON数据的

rootVar

项中包含id信息

下一个问题。属性

“title”：“03-01-11”

错误。

colModel

的属性是布尔值，因此应该将其更改为

“title”：true

。关闭问题：将属性

resizeable

用作

resizeable

，这在英语中可能更正确，但jqGrid将忽略它

现在进行一些小优化：

您可以从

datatype:'jsonstring'，datastr:colD

更改为

datatype:'local'，data:colD.rootVar

添加

gridview:true

参数

如果是

数据类型：'jsonstring'

或

数据类型：'local'

，则将忽略设置

url:'SomeUrl/Getdata'

，以及

mtype:'POST'

。所以您应该删除jqGrid的参数

因为

jsonmap

不会在您的数据模型中使用，所以我建议您将其从JSON数据中删除

在我看来，最好使用

colModel

的附加

标签

属性。在这种情况下，您将不再需要

colNames

（

columnNames

在数据中）

您可以看到的原始演示（我只将

type

更改为`type:“GET”，因为我没有活动的服务器组件，并将JSON保存为文本文件）。我建议的修改后的相同演示是

该方法的主要限制是所有数据都是本地的。因此，您可以使用本地排序、筛选和分页，但如果您确实希望使用服务器端排序、筛选和分页，则必须在jqGrid中包含更多的额外代码

我建议您使用的结果代码是：

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "DynamicColumnBinding1.txt",
        dataType: "json",
        success: function(result){
            var colD = result.couponStripList,
                colM = result.colModelList;

            $("#dataGrid").jqGrid({
                datatype: 'local',
                data: colD.rootVar,
                gridview: true,
                colModel :colM,
                height: "auto",
                loadComplete: function(data){
                    alert('loaded');
                },
                loadError: function(xhr,status,error){
                    alert('error');
                }
            });
        },
        error: function(x, e){
            alert(x.readyState + " "+ x.status +" "+ e.msg);
        }
    });
});

例如，对应的JSON数据如下

{
    "colModelList": [
        {
            "index": "prceCM",
            "label": "CM",
            "name": "prceCM",
            "width": 100
        },
        {
            "index": "prceCMPlusOne",
            "label": "CM + 1",
            "name": "prceCMPlusOne",
            "width": 100
        },
        {
            "index": "prceCMPlusTwo",
            "label": "CM + 2",
            "name": "prceCMPlusTwo",
            "width": 100
        },
        {
            "index": "prceCMPlusThree",
            "label": "CM + 3",
            "name": "prceCMPlusThree",
            "width": 100
        },
        {
            "index": "coupon",
            "label": "Coupon",
            "name": "coupon",
            "align": "right",
            "sorttype": "number",
            "formatter": "number",
            "formatoptions": {
                "thousandsSeparator": ","
            },
            "width": 100
        }
    ],
    "columnNames": [
        "prceCM",
        "prceCMPlusOne",
        "prceCMPlusTwo",
        "prceCMPlusThree",
        "coupon"
    ],
    "couponStripList": {
        "rootVar": [
            {
                "id": 71,
                "coupon": 5.0,
                "prceCM": "Not Available",
                "prceCMPlusOne": "Not Available",
                "prceCMPlusThree": "Not Available",
                "prceCMPlusTwo": "Not Available"
            },
            {
                "id": 72,
                "coupon": 5.5,
                "prceCM": "Not Available",
                "prceCMPlusOne": "Not Available",
                "prceCMPlusThree": "Not Available",
                "prceCMPlusTwo": "Not Available"
            },
            {
                "id": 73,
                "coupon": 6.0,
                "prceCM": "Not Available",
                "prceCMPlusOne": "Not Available",
                "prceCMPlusThree": "Not Available",
                "prceCMPlusTwo": "Not Available"
            },
            {
                "id": 74,
                "coupon": 6.5,
                "prceCM": "Not Available",
                "prceCMPlusOne": "Not Available",
                "prceCMPlusThree": "Not Available",
                "prceCMPlusTwo": "Not Available"
            },
            {
                "id": 75,
                "coupon": 7.0,
                "prceCM": "Not Available",
                "prceCMPlusOne": "Not Available",
                "prceCMPlusThree": "Not Available",
                "prceCMPlusTwo": "Not Available"
            }
        ]
    },
    "deliveredDataTimestamp": null,
    "requestedTimestamp": null
}

---

谢谢你，奥列格。节省了我的时间。几天前开始使用jquery和jqgrid，现在仍在学习。至于这个问题，我的意思是使用lable而不是title，谢谢你的详细回答。@Oleg&@Silpa：我的jqgrid定义与你的相同。我的JSON有点不同。我很难使用

jsonmap

将

单元格映射到每一列。请看一看-没有办法-它只是工作。完美地奥列格，你真是个天才！！为我节省了很多工作时间。呼：）@peterRunnings:我很高兴能帮助你。不客气！
$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "DynamicColumnBinding1.txt",
        dataType: "json",
        success: function(result){
            var colD = result.couponStripList,
                colM = result.colModelList;

            $("#dataGrid").jqGrid({
                datatype: 'local',
                data: colD.rootVar,
                gridview: true,
                colModel :colM,
                height: "auto",
                loadComplete: function(data){
                    alert('loaded');
                },
                loadError: function(xhr,status,error){
                    alert('error');
                }
            });
        },
        error: function(x, e){
            alert(x.readyState + " "+ x.status +" "+ e.msg);
        }
    });
});

{
    "colModelList": [
        {
            "index": "prceCM",
            "label": "CM",
            "name": "prceCM",
            "width": 100
        },
        {
            "index": "prceCMPlusOne",
            "label": "CM + 1",
            "name": "prceCMPlusOne",
            "width": 100
        },
        {
            "index": "prceCMPlusTwo",
            "label": "CM + 2",
            "name": "prceCMPlusTwo",
            "width": 100
        },
        {
            "index": "prceCMPlusThree",
            "label": "CM + 3",
            "name": "prceCMPlusThree",
            "width": 100
        },
        {
            "index": "coupon",
            "label": "Coupon",
            "name": "coupon",
            "align": "right",
            "sorttype": "number",
            "formatter": "number",
            "formatoptions": {
                "thousandsSeparator": ","
            },
            "width": 100
        }
    ],
    "columnNames": [
        "prceCM",
        "prceCMPlusOne",
        "prceCMPlusTwo",
        "prceCMPlusThree",
        "coupon"
    ],
    "couponStripList": {
        "rootVar": [
            {
                "id": 71,
                "coupon": 5.0,
                "prceCM": "Not Available",
                "prceCMPlusOne": "Not Available",
                "prceCMPlusThree": "Not Available",
                "prceCMPlusTwo": "Not Available"
            },
            {
                "id": 72,
                "coupon": 5.5,
                "prceCM": "Not Available",
                "prceCMPlusOne": "Not Available",
                "prceCMPlusThree": "Not Available",
                "prceCMPlusTwo": "Not Available"
            },
            {
                "id": 73,
                "coupon": 6.0,
                "prceCM": "Not Available",
                "prceCMPlusOne": "Not Available",
                "prceCMPlusThree": "Not Available",
                "prceCMPlusTwo": "Not Available"
            },
            {
                "id": 74,
                "coupon": 6.5,
                "prceCM": "Not Available",
                "prceCMPlusOne": "Not Available",
                "prceCMPlusThree": "Not Available",
                "prceCMPlusTwo": "Not Available"
            },
            {
                "id": 75,
                "coupon": 7.0,
                "prceCM": "Not Available",
                "prceCMPlusOne": "Not Available",
                "prceCMPlusThree": "Not Available",
                "prceCMPlusTwo": "Not Available"
            }
        ]
    },
    "deliveredDataTimestamp": null,
    "requestedTimestamp": null
}