从 websocket 源创建一个更新的 jqgrid

Question

我目前正在从 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>

请帮忙..

Answer 1

您应该创建网格（调用 $("#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({...}); 的过程中，最初的 table 将被转换为相对复杂的 div 和 table 结构（例如参见 [=19=]）。另一方面，重新加载 table 的主体 比重新创建网格更有效。

补充说明：colMode中的值height:"auto"不正确。它将被忽略并改为使用 150。

从 websocket 源创建一个更新的 jqgrid

creating an updating jqgrid from a websocket source

jquery

jqgrid

websocket