jqgrid - 显示带有动态列绑定(bind)的 jqgrid 的问题

Question

我正在尝试从 struts 操作传递 colModel 和列。就像在问题中一样
jqGrid and dynamic column binding

我不确定我错过了什么。请帮忙。花了很多时间试图让它正确。

jsp:

  <script type="text/javascript">
  $(document).ready(function(){
   $.ajax( 
     {
    type: "POST",          
    url: "interFinalTbaAction.action",          
    data: "",          
   dataType: "json",          
    success: function(result){               
      colD = result.couponStripList;               
     colN = result.columnNames;               
     colM = result.colModelList;  

       jQuery("#dataGrid").jqGrid({ 
      jsonReader : {
                repeatitems: false,
                root:"rootVar",
                cell: "",
                id: "0"
            },

      url: 'SomeUrl/Getdata',                   
      datatype: 'jsonstring',                   
      mtype: 'POST',                   
      datastr : colD,                   
      colNames:colN,                   
      colModel :colM,                   
      loadComplete: function(data){alert('loaded');},                   
      loadError: function(xhr,status,error){
         alert('error');
      }               
   })          
 },         
   error: function(x, e){
    alert(x.readyState + " "+ x.status +" "+ e.msg);             
  }       
}); 
});  
</script>

 <h2>Inter Final Prices</h2>
 <table id="dataGrid">
</table>
</html>

我的操作返回的 JSON 是

           {
"colModelList": [
    {
        "index": "prceCM",
        "jsonmap": null,
        "key": false,
        "name": "prceCM",
        "resizeable": true,
        "search": true,
        "sortable": false,
        "title": "03-01-11",
        "width": 300
    },
    {
        "index": "prceCMPlusOne",
        "jsonmap": null,
        "key": false,
        "name": "prceCMPlusOne",
        "resizeable": true,
        "search": true,
        "sortable": false,
        "title": "04-01-11",
        "width": 300
    },
    {
        "index": "prceCMPlusTwo",
        "jsonmap": null,
        "key": false,
        "name": "prceCMPlusTwo",
        "resizeable": true,
        "search": true,
        "sortable": false,
        "title": "05-01-11",
        "width": 300
    },
    {
        "index": "prceCMPlusThree",
        "jsonmap": null,
        "key": false,
        "name": "prceCMPlusThree",
        "resizeable": true,
        "search": true,
        "sortable": false,
        "title": "06-01-11",
        "width": 300
    },
    {
        "index": "coupon",
        "jsonmap": null,
        "key": false,
        "name": "coupon",
        "resizeable": true,
        "search": true,
        "sortable": false,
        "title": null,
        "width": 300
    }
   ],
   "columnNames": [
    "prceCM",
    "prceCMPlusOne",
    "prceCMPlusTwo",
    "prceCMPlusThree",
    "coupon"
  ],
   "couponStripList": {
    "rootVar": [
        {
            "coupon": 5.0,
            "prceCM": "Not Available",
            "prceCMPlusOne": "Not Available",
            "prceCMPlusThree": "Not Available",
            "prceCMPlusTwo": "Not Available"
        },
        {
            "coupon": 5.5,
            "prceCM": "Not Available",
            "prceCMPlusOne": "Not Available",
            "prceCMPlusThree": "Not Available",
            "prceCMPlusTwo": "Not Available"
        },
        {
            "coupon": 6.0,
            "prceCM": "Not Available",
            "prceCMPlusOne": "Not Available",
            "prceCMPlusThree": "Not Available",
            "prceCMPlusTwo": "Not Available"
        },
        {
            "coupon": 6.5,
            "prceCM": "Not Available",
            "prceCMPlusOne": "Not Available",
            "prceCMPlusThree": "Not Available",
            "prceCMPlusTwo": "Not Available"
        },
        {
            "coupon": 7.0,
            "prceCM": "Not Available",
            "prceCMPlusOne": "Not Available",
            "prceCMPlusThree": "Not Available",
            "prceCMPlusTwo": "Not Available"
        }
    ]
   },
   "deliveredDataTimestamp": null,
   "requestedTimestamp": null
 }

谢谢。

Answer 1

在我的测试中 your code工作。尽管如此，由于您的问题对许多 jqGrid 用户来说都很有趣，所以我决定在您的代码和 JSON 数据中写一些小错误和优化。

第一个也是最重要的问题是项目的 ID。设置id:"0" jsonReader 内部是错的。只有当数据项是数组而不是具有命名属性(repeatitems:false)的对象时，才能使用它。目前作为行的 id 将使用整数 1,2,... 我强烈建议您在 rootVar 的项目中包含 id 信息JSON 数据。

下一个问题。楼盘"title": "03-01-11"是错的。 "title" colModel 的属性(property)是 bool 值，所以应该改为"title": true .关闭问题:属性resizable您用作 resizeable这在英语中可能更正确，但它会被 jqGrid 忽略。

现在小优化:

您可以从 datatype:'jsonstring', datastr:colD 更改至datatype: 'local', data: colD.rootVar

添加 gridview: true范围。

设置url: 'SomeUrl/Getdata' , 和 mtype: 'POST' , 在 datatype:'jsonstring' 的情况下将被忽略或 datatype:'local' .所以你应该只删除jqGrid的参数。

因为jsonmap不会在您的数据模型中使用我建议您将其从 JSON 数据中删除。

在我看来，使用额外的label 更好。 colModel 的属性(property).如果您不再需要 colNames (columnNames 在您的数据中)。

您可以看到的原始演示 here (我只将 type 更改为 `type:"GET"因为我没有事件的服务器组件并将 JSON 保存为文本文件)。我建议的修改后的相同演示是 here .

该方式的主要限制是所有数据都是 本地 .因此，您可以使用本地排序、过滤和分页，但如果您确实想要服务器端排序、过滤和分页，则必须在 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
}