更新jqGrid时如何刷新谷歌图表

Question

我在用户控件中有一个 jqGrid，它位于 .aspx 页面上。我还有一个谷歌图表来在同一页面上显示网格数据。表格和图表都使用 Handler1.aspx 作为 url。 Handler1.ashx 调用 SQL 服务器并返回 JSON。

最初加载页面时，我可以看到图形和图表都进入 Handler1.ashx 以获取数据 - 所以我得到了一个网格和一个漂亮的折线图。

问题是当我更新网格中的数据时，图表没有更新。

我尝试了 SO 解决方案 Here 没有成功。我还在页面上尝试了一个调用 drawChart() 的按钮。这是我的网格：

        $(function () {
        $('#dataGrid').jqGrid({
            url: 'Handler1.ashx',
            datatype: 'json',
            mtype: 'POST',

            colNames: ["Days", "Origin IB Loads", "Origin OB Loads", "Dest IB Loads", "Dest IB Loads", "ID"],
            colModel: [
                       { name: 'Days', index: 'Days', width: 100, editable: true, editrules: { required: true }, },
                       { name: 'OrigIB', index: 'OrigIB', width: 100, editable: true, editrules: { required: true }, },
                       { name: 'OrigOB', index: 'OrigOB', width: 100, editable: true, editrules: { required: true }, },
                       { name: 'DestIB', index: 'DestIB', width: 100, editable: true, editrules: { required: true }, },
                       { name: 'DestOB', index: 'DestOB', width: 100, editable: true, editrules: { required: true }, },
                       { name: 'ID', index: 'ID', width: 80, Key: true, hidden: true }
                      ],
            loadonce: false,
            pager: '#pagingGrid',
            rowNum: 10,
            rowList: [10, 20, 30, 'All'],
            viewrecords: true,
            gridview: true,
            autoencode: true,
            loadComplete: function (data) {
                $(".ui-pg-selbox option[value='All']").val(10000);
            },
            caption: 'Graph Data',
            editurl: 'Handler2.ashx'
        });

        jQuery("#dataGrid").navGrid("#pagingGrid", {
            edit: true,
            add: true,
            del: true,
            search: false,
            //searchtext: "Search",
            refresh: true
        },
            {
                closeAfterEdit: true,
                reloadAfterSubmit: true
            },
            {
                closeAfterAdd: true,
                reloadAfterSubmit: true
            },
            {
                reloadAfterSubmit: true
            });

    })

这是我的图表 - 包括网格用户控件和图表 div：

    google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);


function drawChart() {
    $.ajax({
        url: "handler1.ashx",
        dataType: "json",
        async: "false",
        success: function (jsonData) {
            var data = new google.visualization.DataTable();
            data.addColumn('number', 'Days');
            data.addColumn('number', 'Origin IB Loads');
            data.addColumn('number', 'Origin OB Loads');
            data.addColumn('number', 'Dest IB Loads');
            data.addColumn('number', 'Dest OB Loads');
            for (var i = 0; i < jsonData.length; i++) {
                data.addRow([jsonData[i].Days, jsonData[i].OrigIB, jsonData[i].OrigOB, jsonData[i].DestIB, jsonData[i].DestOB]);
            }

            var options = {
                title: 'Single Lane Route Quote',
                is3D: true,
                curveType: 'function',
                legend: { position: 'bottom' },
                vAxis: { title: "Days" },
                hAxis: { title: "Loads" }
            };

            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
            chart.draw(data, options);
        }
    });

}


<My:GridControl ID ="gridControl" runat="server" />

<div id="curve_chart" style="width: 1000px; height: 500px"></div>

在网格中进行更新后如何让图表刷新？

Answer 1

如果你尝试这样的事情会怎样......

1. 加载谷歌
2. 加载 jqGrid
3. loadComplete 在 jqGrid 上触发时加载图表

这将允许谷歌启动，然后当网格更新时，图表也会...

google.charts.load('current', {
  callback: loadDataGrid,
  packages: ['controls', 'table']
});

function loadDataGrid() {
  $('#dataGrid').jqGrid({
      url: 'Handler1.ashx',
      datatype: 'json',
      mtype: 'POST',
      colNames: ["Days", "Origin IB Loads", "Origin OB Loads", "Dest IB Loads", "Dest IB Loads", "ID"],
      colModel: [
                 { name: 'Days', index: 'Days', width: 100, editable: true, editrules: { required: true }, },
                 { name: 'OrigIB', index: 'OrigIB', width: 100, editable: true, editrules: { required: true }, },
                 { name: 'OrigOB', index: 'OrigOB', width: 100, editable: true, editrules: { required: true }, },
                 { name: 'DestIB', index: 'DestIB', width: 100, editable: true, editrules: { required: true }, },
                 { name: 'DestOB', index: 'DestOB', width: 100, editable: true, editrules: { required: true }, },
                 { name: 'ID', index: 'ID', width: 80, Key: true, hidden: true }
                ],
      loadonce: false,
      pager: '#pagingGrid',
      rowNum: 10,
      rowList: [10, 20, 30, 'All'],
      viewrecords: true,
      gridview: true,
      autoencode: true,
      loadComplete: function (data) {
          $(".ui-pg-selbox option[value='All']").val(10000);

          var chartData = new google.visualization.DataTable();
          chartData.addColumn('number', 'Days');
          chartData.addColumn('number', 'Origin IB Loads');
          chartData.addColumn('number', 'Origin OB Loads');
          chartData.addColumn('number', 'Dest IB Loads');
          chartData.addColumn('number', 'Dest OB Loads');
          for (var i = 0; i < data.length; i++) {
              chartData.addRow([data[i].Days, data[i].OrigIB, data[i].OrigOB, data[i].DestIB, data[i].DestOB]);
          }

          var options = {
              title: 'Single Lane Route Quote',
              is3D: true,
              curveType: 'function',
              legend: { position: 'bottom' },
              vAxis: { title: "Days" },
              hAxis: { title: "Loads" }
          };

          var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
          chart.draw(chartData, options);
        }

      },
      caption: 'Graph Data',
      editurl: 'Handler2.ashx'
  });

  jQuery("#dataGrid").navGrid("#pagingGrid", {
      edit: true,
      add: true,
      del: true,
      search: false,
      //searchtext: "Search",
      refresh: true
  },
  {
      closeAfterEdit: true,
      reloadAfterSubmit: true
  },
  {
      closeAfterAdd: true,
      reloadAfterSubmit: true
  },
  {
      reloadAfterSubmit: true
  });
}