显示带有动态列绑定的 jqgrid 的问题答案

【问题标题】：Problem showing jqgrid with dynamic column binding显示带有动态列绑定的 jqgrid 的问题
【发布时间】：2011-07-03 22:57:18
【问题描述】：

我正在尝试从 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
 }

谢谢。

【问题讨论】：

标签： jqgrid

【解决方案1】：

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

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

下一个问题。属性"title": "03-01-11" 是错误的。 colModel 的"title" 属性是boolean，所以应该改为"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 数据中删除。
在我看来，最好使用colModel 的附加label 属性。在这种情况下，您将不再需要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
}

【讨论】：

谢谢奥列格。节省了我的时间。前几天开始上jquery和jqgrid，还在学习。至于问题，我的意思是使用标签而不是标题，感谢您的详细回答。
@Oleg & @Silpa：我的 jqgrid 定义和你的一样。我的 JSON 有点不同。我很难使用jsonmap 将cells 映射到每一列。请看一下 - stackoverflow.com/questions/8618691/…
没办法 - 它只是工作。完美。奥列格，你是个天才！！节省了我的工作时间。呼:)
@PeterMunnings：很高兴能帮到你。不客气！