jqGrid

Question

我真的是 jqGrid 的新手。我正在加载本地文件（我正在将 csv 文件解析为 json，然后将数组传输到 jqGrid）。 Table 通过 jqGrid 生成的应该允许用户修改、添加和删除网格中的数据。我尝试使用此处的各种答案来解决我的问题，例如：

Adding new row to jqGrid using modal form on client only

在那里，我找到了 Oleg 为 4.7 version of jqGrid 制作的示例，并为我的目的复制了相同的代码。结果是我能够删除我在网格初始化后添加的行，但我无法删除从中加载的任何其他行阵列。

另一个有趣的事情是我能够修改从数组加载的行，我唯一不能对网格做的是删除从数组加载的行。我很感激任何建议。

这是 jqGrid 的部分代码：

var delSettings = {
onclickSubmit: function () {
  var $this = $(this), p = $this.jqGrid("getGridParam"), newPage = p.page;

    if (p.lastpage > 1) {// on the multipage grid reload the grid
      if (p.reccount === 1 && newPage === p.lastpage) {
        // if after deliting there are no rows on the current page
        // which is the last page of the grid
        newPage--; // go to the previous page
      }
      // reload grid to make the row from the next page visable.
      setTimeout(function () {
        $this.trigger("reloadGrid", [{page: newPage}]);
      }, 50);
    }
    return true;
}
};

  $("#jqGrid").jqGrid({
    datatype: "local",
    data: results.data,
    editurl: "clientArray",
    colModel: [
    { 
      label: 'Id',
      name: 'Id', 
      width: 60,
      editable: true, 
      key: true,
      sorttype: 'number'
    },
    { 
      label: 'Company', 
      name: 'Company', 
      width: 90,
      editoptions: {size: 40},
      editable: true,
      sorttype: 'string'
    },
    {
      label: 'Address', 
      name: 'Address', 
      width: 100,
      editoptions: {size: 40},
      editable: true
    },
    {
      label: 'City', 
      name: 'City', 
      width: 80,
      editoptions: {size: 40},
      editable: true
    }
    ],
    height: '100%',
    viewrecords: true,
    caption: "Baza klientów Klimatest",
    pager: "#jqGridPager",
    sortable: true,
    ignoreCase: true,
    cmTemplate: {editable: true, searchoptions: {clearSearch: true }},
    rowNum: 5,
    rowList: [5, 10, 20],
  });

  // toolbar searching
  $('#jqGrid').jqGrid('filterToolbar', { defaultSearch: 'cn'});
  $('#jqGrid').jqGrid('navGrid',"#jqGridPager",
  { edit: true, add: true, del: true, search: true, refresh: true, view: true},
  // options for the Edit Dialog
  {
    editCaption: "The Edit Dialog",
    recreateForm: true,
    closeAfterEdit: true,
    errorTextFormat: function (data) {
      return 'Error: ' + data.responseText
    }
  },
  // options for the Add Dialog
  {
    closeAfterAdd: true,
    recreateForm: true,
    errorTextFormat: function (data) {
      return 'Error: ' + data.responseText
    }
  },
  // options for the Delete Dialog
  delSettings,
  // options for the Search Dialog
  {

  },
  // options for the View Dialog
  {

  });
  // add first custom button
  $('#jqGrid').navButtonAdd('#jqGridPager',
  {
    buttonicon: "ui-icon-calculator",
    title: "Column chooser",
    caption: "Columns",
    position: "last",
    onClickButton: function() {
        // call the column chooser method
        jQuery("#jqGrid").jqGrid('columnChooser');
    }
  });

编辑数据源是通过 Papaparse.js 插件（对象数组）解析的 CSV 文件的结果，如下所示：

Id: "100,1"
Address: "Strefowa 8"
Company: "DSSE Sp. z o.o."
City: "Warsaw"

我按照 Oleg 的建议编辑了代码，但我仍然只能删除通过 jqGrid 界面添加的记录。

我不知道这是否有帮助，但是当我单击删除图标并确认我要删除所选行时，该行不再突出显示，但仍然可见。感谢反馈。

Answer 1

您的代码在 // options for the View Dialog 块附近有明显错误。查看选项应包含在删除和搜索选项之后（参见 the documentation）。所以您当前的代码不使用 delSettings 选项。

我建议您在下一个问题中另外包含测试数据，因为有些问题仅存在于某些特定格式的输入数据中。

已更新：问题出在您使用的数据上。您使用的 Id 的值包含 comma（“100,1”）。 jqGrid 不允许这样做。首先HTML中的id不应该使用CSS中有特殊含义的字符。第二个问题：delGridRow 方法在分隔符中使用逗号一次删除多行。因此 id="100,1" 的用法将遵循以尝试删除两行：一行 id=100，第二行 id=1。顺便说一句，我现在正在 GitHub 的 my fork 中开发 jqGrid。我修复了许多关于在 id 中使用特殊字符的限制。因此，如果您使用我的叉子中的 jqGrid，您将能够使用 id="100,1" 并成功删除行。

如果你需要构造由多个数字组成的id，我建议你使用下划线：Id: "100_1"而不是Id: "100,1"。

jqGrid - 如何从本地数据中删除行？

jqGrid - how to delete row from local data?

javascript

jquery

local