Question

我是JQGrid的新手。

我得到了一个服务器端POJO的JSON表示，我试图在JQGrid中呈现。

场景-1 - 显示来自回复的数组

{

       "parameterWiseResult": null,

       "results": null,

       "resultsCollection":

       [

           {

               "_id":

               {

                   "SpId": 515,

                   "Channel_Id": 0,

                   "ActivityId": "Hk1Uzn0oqSUbMc56SAbFZw",

                   "SchedularId": 2127,

                   "UniqueID": 9

               },

               "Sentiment": 7.870000000000002,

               "id": 1

           },

           {

               "_id":

               {

                   "SpId": 515,

                   "Channel_Id": 0,

                   "ActivityId": "GiMkGZqChJsTvJ2LKrdFhA",

                   "SchedularId": 2127,

                   "UniqueID": 11

               },

               "Sentiment": 2.06,

               "id": 2

           }

       ],

       "result": null,

       "errorMessage": null,

       "paginationParameters":

       {

           "rangeKey": 0,

           "noOfPages": 0,

           "totalNoOfRecords": 61,

           "page": 61

       }

    }

下面是我用来为上面的响应填充网格的示例代码：

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

</HEAD>



<BODY>

  <title>TestGrid</title>

<script src="scripts/jquery-1.9.1.js" type="text/javascript"></script>

<script src="scripts/jquery-ui.js" type="text/javascript"></script>

<script src="scripts/grid.locale-en.js" type="text/javascript"></script>

<script src="scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

<script src="scripts/custom/grid.js" type="text/javascript"></script>

<link rel="stylesheet" href="css/common/ui.css" />

<link rel="stylesheet" href="css/jquery-ui.css" />

<script type="text/javascript">

$(document).ready(function() {



       var tee = {"spId" : 515, "channels" : [2,7], "queryParameters" : {"Sentiment" : "Positive"} , "channelWisePaginationParameters" : {"7" : {"noOfPages" : 50, "rangeKey" : 8},"2" : {"noOfPages" : 1, "rangeKey" : 4}}};



       jQuery("#testGrid").jqGrid({



              jsonReader : {

                     root:"resultsCollection",

                           page : "paginationParameters.noOfPages", //current page of the query

                           total : "paginationParameters.page", //total pages for the query

                           records : "paginationParameters.totalNoOfRecords",//total number of records for the query

                           rows: "results",

                           repeatitems : false,

                           id : "id" //the unique id of the row

                     }, 



               url:'http://localhost:8080/SapphireDataAnalysis/ChannelDetails/ProcessedDataForSentimentWithId',

                     mtype: 'POST',

                     postData : JSON.stringify(tee) ,

                     ajaxGridOptions: { contentType: 'application/json'}, 

                         ajaxEditOptions: { contentType: 'application/json', dataType: 'json' },

              datatype: "json",

              colNames:['Sentiment'],

              colModel:[ 

               {name:'Sentiment',label:'Sentiment', width:55}

                ],

              rowNum:10,

              rowList:[10,20,30],

              pager: '#testGridPager',

              viewrecords: true,

         gridview: true,

              height: '100%' ,

              loadComplete: function (data) {

                         var myData = JSON.stringify(data);

                         alert(myData);

                     }

              });

});

</script>

</head>

<body>

<h1>Test grid </h1>

<table id="testGrid">

</table>

<div id="testGridPager"></div>

</BODY>

</HTML>

场景-2 - 数组地图

{

       "parameterWiseResult":

       {

           "Youtube":

           [

               {

                   "_id":

                   {

                       "SpId": 515,

                       "Channel_Id": 0,

                       "ActivityId": "Hk1Uzn0oqSUbMc56SAbFZw",

                       "SchedularId": 2127,

                       "UniqueID": 9

                   },

                   "Sentiment": 7.870000000000002,

                           "id": 1

               },

               {

                   "_id":

                   {

                       "SpId": 515,

                       "Channel_Id": 0,

                       "ActivityId": "GiMkGZqChJsTvJ2LKrdFhA",

                       "SchedularId": 2127,

                       "UniqueID": 11

                   },

                   "Sentiment": 2.06,

                   "id": 2

               }

           ],

           "Twitter":

           [

               {

                   "_id":

                   {

                       "SpId": 515,

                       "Channel_Id": 0,

                       "ActivityId": "616070755",

                       "SchedularId": 2127,

                       "UniqueID": 5

                   },

                   "Sentiment": 0.215,

                   "id": 1

               },

               {

                   "_id":

                   {

                       "SpId": 515,

                       "Channel_Id": 0,

                       "ActivityId": "1335772050",

                       "SchedularId": 2127,

                       "UniqueID": 6

                   },

                   "Sentiment": 0.07,

                           "id": 2

               }

           ]

       },

       "results": null,

       "resultsCollection": null,

       "result": null,

       "errorMessage": null,

       "paginationParameters":

       {

           "rangeKey": 0,

           "noOfPages": 0,

           "totalNoOfRecords": 225,

           "page": 0

       }

    }

我已经完成了Scenario-1但是无法弄清楚如何在jqgrid中渲染方案-2 - 我想要显示这样的内容：

**Channel**          **Sentiment**
Youtube              7.870000000000002
Youtube              2.06
Twitter              0.215
Twitter              0.07

Answer 1

我建议你在这种情况下使用beforeProcessing回调。例如，您可以执行以下操作：

beforeProcessing: function (data) {
    var prop, input = data.parameterWiseResult, i, l, arr, item;
    data.rows = [];
    for (prop in input) {
        if (input.hasOwnProperty(prop) && $.isArray(input[prop])) {
            arr = input[prop];
            l = arr.length;
            for (i = 0; i < l; i++) {
                item = arr[i];
                data.rows.push({
                    id: prop + "_" + item.id,
                    Channel: prop,
                    Sentiment: item.Sentiment
                });
            }
        }
    }
}

The demo显示

enter image description here

jqgrid显示响应图

1 个答案: