создание обновления jqgrid из источника websocket

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({...}); исходная таблица будет преобразована в относительно сложную структуру разделов и таблиц (например, here). С другой стороны, перезагрузка тела стола более эффективна как воссоздание сетки.

Еще одно замечание: значение height:"auto" в colMode неверно. Он будет проигнорирован и вместо этого будет использован 150.