jQGrid

Question

我正在加载本地文件（我正在将 csv 文件解析为 json，然后将数组传输到 jqGrid）。 Table 通过 jqGrid 生成应该允许用户修改、添加和删除网格中的数据。在我想向我的网格中添加一行之前，一切似乎都很完美。其中一列有一个参数 key = true 这是我的行 ID。当我尝试添加新行时，网格将我的 ID 更改为 jpg1。其他列都很好。下面是我正在使用的代码：

$("#jqGrid").jqGrid({
datatype: "local",
data: myData,
editurl: "clientArray",
colModel: [
{ 
  label: 'Kod',
  name: 'Kod',
  width: 60,
  editable: true,
  key: true,
  sorttype: 'number'
},

{ 
  label: 'Firma', 
  name: 'Firma', 
  width: 120,
  editoptions:
  {
    size: 40,
    sopt:['cn']
  },
  editable: true,
  sorttype: 'string'
},
{
  label: 'Adres', 
  name: 'Adres', 
  width: 80,
  editoptions: {size: 40},
  editable: true
},
{
  label: 'Miasto', 
  name: 'Miasto', 
  width: 80,
  editoptions:
  {
    size: 40,
    sopt:['cn']
  },
  editable: true
}
],
height: 'auto',
autowidth: true,
shrinkToFit: false,
forceFit: false,
autoencode: true,
viewrecords: true,
caption: "Title",
pager: "#jqGridPager",
sortable: true,
ignoreCase: true,
sortname: 'Kod',
sortorder: 'asc',
rowNum: 5,
rowList: [5, 10, 20, "10000:All"],
ondblClickRow: function(rowid) {
  $("#jqGrid").jqGrid('editGridRow', rowid,
  {
    editCaption: "The Edit Dialog",
    zIndex:100,
    recreateForm: true,
    closeAfterEdit: true,
    width: 900,
    errorTextFormat: function (data) {
      return 'Error: ' + data.responseText
    }
  });
}


});



$('#jqGrid').jqGrid('navGrid',"#jqGridPager",
  { edit: true, add: true, del: true, search: false, refresh: true, view: true, cloneToTop: true},
  // options for the Edit Dialog
  {
    editCaption: "The Edit Dialog",
    zIndex:100,
    recreateForm: true,
    closeAfterEdit: true,
    reloadAfterSubmit: true,
    width: 900,
    errorTextFormat: function (data) {
      return 'Error: ' + data.responseText
    }
  },
  // options for the Add Dialog
  {
    width: 900,
    zIndex:100,
    closeAfterAdd: true,
    recreateForm: true,
    reloadAfterSubmit: true,
    errorTextFormat: function (data) {
      return 'Error: ' + data.responseText
    }
  },
  // options for the Delete Dialog
  delSettings,
  // options for the Search Dialog
  {
    zIndex:100
  },
  // options for the View Dialog
  {
    width: '100%'
  });

我附上了显示问题的屏幕截图： Photo 我使用的数据是通过 Papaparse.js 插件解析成 JSON 数组的文件。

编辑： 如果有人想测试代码，我已经添加了测试数据。

var myData = [];
  myData.push(
  {
    Kod: 1.1,
    Firma: 'Hutchinson',
    Adres: '5th Avenue',
    Miasto: 'Wroclaw'
  },
  {
    Kod: 2.1,
    Firma: 'BMW',
    Adres: '6th Avenue',
    Miasto: 'Warsaw'
  });

如有任何帮助，我将不胜感激。

Answer 1

如果只是本地编辑需要网格，可以考虑直接去掉key: true 属性即可解决问题。这是我推荐给你的方式。您可以在输入数据中包含 id 属性，这将用作 rowid 的值（id of <tr> 元素）。

或者，您可以将块 "options for the Add Dialog" 更改为以下内容

// options for the Add Dialog
{
  width: 900,
  zIndex:100,
  closeAfterAdd: true,
  recreateForm: true,
  reloadAfterSubmit: true,
  onclickSubmit: function (options, postdata, frmoper) {
      // save Kod in some other parameter
      return {myKod: postdata.Kod};
  },
  afterSubmit: function (jqXHR,postdata, frmoper) {
      // restore the correct value
      postdata.Kod = postdata.myKod;
      // inform jqGrid that it was not an error
      return [true];
  }
},

您仍然无法更改行的 id。

顺便说一句，您使用的是 jqGrid 4.7.1。我想提醒您，jqGrid 4.7.0 是最后一个免费版本。这就是我开始免费的 jqGrid 项目的原因，它仍然是免费的。你可以得到它here (see readme and wiki).

The demo 显示了使用免费的 jqGrid 4.8 修复上述代码的示例。

jQGrid - "jpg1" 而不是正确的 ID 号

jQGrid - "jpg1" instead of proper id number

javascript

jquery

local