从websocket源创建更新jqgrid

时间:2016-02-26 22:44:50

标签: jquery websocket jqgrid

我目前从websocket源获取数据作为json字符串并尝试填充jqgrid。但是只显示一行,也没有数据。 我的websocket源是

  var json ;

    socket.onmessage = function(msg) {
        if (! msg || ! msg.data) {
            return;
        }

       counter++;
       json = JSON.parse(msg.data);
         makeGrid(json);

}

$(document).ready(function() { 
    makeGrid(json);
}

function makeGrid(data){
    var json = [data]; // now this is local data
    console.log(json);
     $("#jqGrid").jqGrid({
            data: json, 
            datatype: "local", 
            colNames: [ "name", "value", "unit"],
            colModel: [
                { name: "name", width:30 ,height:"auto"},
                { name: "value", width: 15, align: "right",height:"auto" },
                { name: "unit", width: 10, align: "right" ,height:"auto"}
            ],
            pager: "#jqGridPager",
            rowNum: 10,
            rowList: [10, 20, 30],
            rownumbers:true,
            viewrecords: true,
            gridview: true,
            autoencode: true,
            caption: "Messages.."
        }); 
 };

在我的html文件中,我有这个..

`<table id="jqGrid"></table>` 
  <div id="jqGridPager"></div>

请帮助..

1 个答案:

答案 0 :(得分:0)

您应该创建网格(调用$("#jqGrid").jqGrid({...});一次。下次您可以使用

重置新数据
var $grid = $("#jqGrid"), // the grid
    p = $grid.jqGrid("getGridPagam");

p.data = newDataArray;
$grid.trigger("reloadGrid", [{current: true}]);

或使用addRowData将行附加到现有网格。

或者,您每次都可以重新创建网格。为此,您可以在创建网格之前使用GridUnload方法。如果网格仍然作为初始<table id="jqGrid"></table>存在,它将不执行任何操作。在创建网格$("#jqGrid").jqGrid({...});期间,初始表将转换为相对复杂的div和表结构(例如,请参阅here)。另一方面,重新加载表格的正文在重新创建网格时更有效。

还有一句话:height:"auto"中的colMode值不正确。它将被忽略并改为使用150