javascript - jqgrid不更新本地数据

Question

我有 jqgrid ，每当下拉菜单发生变化时我都会调用它。但问题是 jqGrid 仅显示第一次加载的数据，之后当我使用新数据集 { 对象数组 } 调用同一函数时，它不会自行更新。下面是代码:

  function loadGrid(colModel, data1) {
  var grid = $("#gridJQ");
  grid.jqGrid({
      datatype: "local",
      viewrecords: true,
      data: data1,
      height: "auto",
      rowNum: 5,
      autowidth: false, // set 'true' here
      rownumbers: true, // show row numbers
      rownumWidth: 25,
      colModel: colModel,
      pager: "#jqGridPager",
      height: "auto",
      caption: "Load jqGrid through Javascript Array",
  }).trigger("reloadGrid");  }

我检查了 col model 和 data1 的值，它每次都会变化，但网格没有反射(reflect)变化。

Answer 1

您写道“每当下拉菜单发生变化时我都会打电话”。我认为代码的作用存在共同理解问题。您已放置空表<table id="gridJQ"></table>最初在 HTML 页面上。第一通电话loadGrid 将空表转换为相对复杂的潜水表结构。您可以使用开发人员工具检查网格以查看网格的外观。初始创建网格后，可以对数据进行排序、更改当前页面、更改列的宽度等。所有操作主要更改网格的主体，而不是带有列标题的外部部分。

因此，您至少有两个主要选项(替代方案)来解决问题:

1. 您必须销毁 jqGrid 并重新创建它。您应该包括 $("#gridJQ").jqGrid("GridUnload"); 在行 var grid = $("#gridJQ"); 之前在loadGrid .
2. 您可以继续使用loadGrid函数仅用于初始创建网格。如果您需要重新加载更新后的网格数据 data1那么你应该调用clearGridData首先，然后使用setGridParam设置新值 data参数并最终使用$("#gridJQ").trigger("reloadGrid")它基于新的 data 重新填充网格的主体(不改变网格的外部部分) 。您可以考虑使用额外的current: true reloadGrid的选项这也将允许保留网格中的当前选择。请参阅the answer有关 reloadGrid 选项的更多信息.

第一种方法将为您提供最简单的方法来解决问题。第二种方法允许从用户的 Angular 创建最舒适的网格。