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

sil*_*lpa 4 jqgrid

我试图从struts动作传递colModel和列.就像问题 jqGrid和动态列绑定一样

我不确定我错过了什么.请帮忙.花了不少时间试图把它弄好.

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>
Run Code Online (Sandbox Code Playgroud)

我的行动回归的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
 }
Run Code Online (Sandbox Code Playgroud)

谢谢.

Ole*_*leg 10

在我的测试中,您的代码有效.然而,因为你的问题的主题对于许多jqGrid用户来说很有趣,所以我在你的代码和JSON数据中写下一些小错误和优化.

第一个也是最重要的问题是物品的ID.id:"0"里面的设置jsonReader是错误的.仅当数据项是数组而不是具有命名属性(repeatitems:false)的对象时,才能使用它.目前作为行的ID将使用整数1,2,...我严格建议您在rootVarJSON数据项中包含id信息.

下一个问题.该属性"title": "03-01-11"是错误的.在"标题"的属性colModel布尔值,所以应该改成"title": true.关闭问题:resizable您使用的属性resizeable在英语中可能更正确,但jqGrid会忽略它.

现在小优化:

  1. 你可以datatype:'jsonstring', datastr:colD改为datatype: 'local', data: colD.rootVar
  2. 添加gridview: true参数.
  3. 设置url: 'SomeUrl/Getdata',和mtype: 'POST',将在以下情况下被忽略datatype:'jsonstring'或者datatype:'local'.所以你应该删除jqGrid的参数.
  4. 因为jsonmap不会在您的数据模型中使用,我建议您从JSON数据中删除它.
  5. 在我看来,使用其他label属性更好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);
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

相应的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
}
Run Code Online (Sandbox Code Playgroud)