jqGrid 插入和更新后奇怪的重新加载数据

Question

JqGrid 行为怪异。我只是创建了一些母版页，其中包含引用数据库中某个表的 jqGrid。

此页面运行良好，然后我需要使用相同的逻辑，并复制带有附加 php 文件的确切页面并创建一些调整，使其指向正确的表。

在我的母版页（部门页——这是第一页（100% 工作））中，jqgrid 函数工作正常，但是在基于第一页的第二页和第三页中，jqgrid 表现得很奇怪。

当我创建新值或更新某些值时，jqgrid 应该自动重新加载带有新数据的网格。但就我而言，网格会重新加载数据，但根本不写入。

这种奇怪的行为没有发生在我的第一个 jQGrid 页面（部门页面）中。

我还插入了一些屏幕截图以使其更清晰

然后简单地将值添加到网格中，参考一些 php 文件。该值被执行，然后存储在数据库中。此方法使用 POST 方法。

然后 jQgrid 会自动从数据库中获取新数据，并且应该写在 GRID 上。但在我的案例中，网格没有写入数据。

如您在屏幕截图的右下角看到的，有 11 个值，从第一个屏幕截图开始，只有 10 个值。所以，网格实际上执行了 INSERT 语句，但是当它重新加载时，它就坏了。

有没有办法克服这个问题？谢谢。

已编辑：HTML代码：

<table id="location"><tr><td /></tr></table>
<div id="pager-location"></div>

JavaScript 代码：

$(document).ready(function() {
    //alert("start");
    jQuery("#location").jqGrid({
        mtype:'GET',
        url:'functions/get_location.php',
        editurl:'functions/edit_location.php',
        datatype: "JSON",
        colNames:['Location ID','Location'],
        colModel:[
            {name:'idms_location',index:'idms_location', width:150, editable:true,add:true, del:true, key:true},
            {name:'location',index:'location', width:800,editable:true, add:true, del:true}     
        ],
        loadComplete: function () {
        alert("OK");
        },    
        loadError: function (jqXHR, textStatus, errorThrown) {
            alert('HTTP status code: ' + jqXHR.status + '\n' +
                  'textStatus: ' + textStatus + '\n' +
                  'errorThrown: ' + errorThrown);
            alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
        },
        rowNum:10,
        rowList:[5,10,15],
        pager: '#pager-location',
        sortname: 'idms_location',
        viewrecords: true,
        jsonReader: {repeatitems: true, idms_location: "idms_location" },
        sortorder: "asc",
        caption:"MSC Locations"
    });
    jQuery("#location").jqGrid('navGrid','#pager-location',{edit:true,add:true,del:true},{},{},{},{closeAfterSearch:true},{});
    jQuery("#location").jqGrid('gridResize',{minWidth:350,maxWidth:850,minHeight:80, maxHeight:350});
    //alert("end");
});

Answer 1

我验证了您使用的代码并找到了原因。 您的代码中有id 重复问题。您定义了用于 jqGrid 的 <table> 元素如下

<table id="location"><tr><td /></tr></table>
<div id="pager-location"></div>

它有"location" 作为id。后来你定义了

colModel: [
    {name:'idms_location',index:'idms_location', width:150, editable:true,add:true, del:true, key:true},
    {name:'location',index:'location', width:800,editable:true, add:true, del:true}     
],

名称location 将用作列名。问题是列名将用于构建网格中不同元素的id 名称。另外表单编辑使用列名直接作为<input>字段的id值，代表位置。使用后添加表单以下元素

<input name="location" class="FormElement ui-widget-content ui-corner-all" id="location" role="textbox" type="text">

也存在于带有id="location" 的页面上。如果用户关闭表单，它将被隐藏，但不会被销毁。因为编辑表单将放置在页面之前 <table id="location"> 下一个$("#location tbody:first") 在the line 中使用，所以没有找到更多表格并且网格保持空白。

你应该做的只是将<table id="location">重命名为<table id="grid-location">`或选择任何其他名称。你应该更新相应的JavaScript代码。

应在网格中完成的其他更改：

• 将jsonReader: {repeatitems: true, idms_location: "idms_location" } 更改为jsonReader: {id: "idms_location" }。
• 添加gridview: true 选项。
• 添加autoencode: true 选项。
• 从colModel 中删除不存在的选项add:true, del:true 属性
• 从colModel 中删除index 属性。
• 您应该修复Content-Type HTTP 标头，您在服务器响应中使用 JSON 数据。它应该是 Content-Type: application/json 而不是您当前使用的 Content-Type: text/html。这只是一行 PHP 代码。
• 您可以删除 navGrid 的 {edit:true,add:true,del:true} 选项 - 这是默认选项。