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

// options for the View Dialog块附近的代码中有明显错误。视频选项应包含在删除和搜索选项之后<（参见the documentation）。因此，您当前的代码不会使用delSettings选项。

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

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

如果您需要构建包含多个数字的ID，我建议您使用下划线：Id: "100_1"而不是Id: "100,1"。

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

1 个答案: