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

Question

我对 jqGrid 真的很陌生。我正在加载本地文件(我正在将 csv 文件解析为 json，然后将数组传输到 jqGrid)。通过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

您的代码中靠近 //View Dialog 选项 block 的地方有明显错误。 “查看”选项应包含在删除和搜索选项之后(请参阅 the documentation)。因此，您当前的代码不使用 delSettings 选项。

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

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

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