jQGrid - " jpg1"而不是正确的身份证号码 [英] jQGrid - "jpg1" instead of proper id number

问题描述

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

I'm loading local file (I'm parsing csv file into json and then transfer the array to jqGrid). Table generated through jqGrid should allow user to modify, add and delete the data in the grid. Everything seemed to work perfectly until I wanted to add a row to my grid. One of the columns had a parameter key = true which is my id for the rows. When I try to add new row, the grid changes my id into jpg1. The others columns are fine. Below is the code I'm using:

$("#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%'
  });

我附上一个显示问题的屏幕截图：
照片
我使用的数据是通过Papaparse.js插件解析为JSON数组的文件。

I'm attaching a screenshot that shows a problem: Photo The data I use is a file parsed into JSON array via Papaparse.js plugin.

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

I've added the test data if somebody would like to test the code.

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

我将不胜感激任何帮助。

I will be grateful for any help.

推荐答案

如果您只需要网格进行本地编辑，您可以考虑删除 key：true 属性来解决问题。这是方式，我建议你。您可以在输入数据中包含 id 属性，该属性将用作rowid的值（ id < tr> 元素）。

If you need the grid only for local editing, you can consider just remove key: true property to solve the problem. It's the way, which I would recommend you. You can include id property in the input data which will be used as value of rowid (id of <tr> elements).

或者，您可以将添加对话框的块选项更改为以下

Alternatively you can change the block "options for the Add Dialog" to the following

// 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 。

You still don't would be able to change the id of the row in the way.

顺便说一句，你写的是使用jqGrid 4.7.1。我想提醒你，jqGrid 4.7.0是免费的最后一个版本。这就是我开始免费的jqGrid项目的原因。你可以在这里 获得它（参见自述文件和 wiki 。

By the way you wrote that you use jqGrid 4.7.1. I want remind you that jqGrid 4.7.0 is the last version which is free. It's the reason why I started free jqGrid project which still free. You can get it here (see readme and wiki).

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

The demo shows an example of the above code fixes using free jqGrid 4.8.

这篇关于jQGrid - " jpg1"而不是正确的身份证号码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！